[JavaScript]createElementでリンクを追加する

2022年3月16日

環境
Google Chrome　99.0.4844.51

書式
リンクaタグ作成
const 変数 = document.createElement(“a");
リンクタグの属性(href、target、innerText)を設定します。

使用例

<!DOCTYPE html>
<html>
<body>
<div id="cft"></div>

<p><input type="button" value="追加" onclick="addBtn()" /></p>
<script>
  function addBtn() {
      //セレクタcftの取得
　　　const gg = document.getElementById("cft");
    　// 要素の追加
    　if (!gg.hasChildNodes()) {
         　//リンクa要素作成
      　　const mm = document.createElement("a");
        　　//リンク先
      　　　mm.href = "https://arkgame.com/";
         　// innerText
         　mm.innerText = "arkgameサイトのリンク";
      　　　mm.target = "_blank";
           //子ノードを追加
      　　　gg.appendChild(mm);
    }
  }
</script>

</body>
</html>

実行結果
「追加」ボタンを押すと、「arkgameサイトのリンク」リンクを作成します。

JavaScript

Posted by arkgame