[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="追加" /></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