【JavaScript】JavaScriptでa要素のhref属性を操作する

JavaScript

JavaScriptを使えば、a要素のhref属性を操作することができます。

実践的な流れ

今回は新たにaタグを作って親要素に追加する、という実践的な流れを仮定してコードを確認していきます。

下のコードは作成ボタンを押すことで自分で設定したaタグの要素が追加される仕組みになっています。

createElementでa要素を作成してます。

そして設定したaタグをappendChildを使って親要素のdivタグに追加しています。

<div id="create_link">
  <input type="button" id="create_btn" value="作成" >
</div>

<script>
  //input要素を取得
  const createBtn = document.getElementById("create_btn");
  console.log(createBtn)
    createBtn.addEventListener('click', function() {
    //div要素の取得
    const createLink = document.getElementById("create_link");
    //a要素を追加
    const a1 = document.createElement("a");
    a1.href = "https://◯◯◯.com/"; //URLを指定
    a1.target = "_blank"; //リンク先を別タブで開くよう指定
    a1.innerText = "リンクを作成"; //挿入される文字列の指定
    //div要素に追加
    createLink.appendChild(a1);
    });

</script>

表示結果


下の作成ボタンをクリックすることによって以下のようにリンクが追加されます。

タイトルとURLをコピーしました