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

2022年3月16日

環境
Google Chrome 99.0.4844.51

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

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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