【コピペ】jsでa要素を作成・追加する方法【Javascript】

HTML

2023.01.292023.01.30

まず最初に、Javascriptでa要素を作成、hrefとtextを設定するコードになります。コピペして自由にお使いください。

// a要素作成
var element = document.createElement("a");
element.href="URL";
element.textContent="テキスト";

要素の追加方法、詳しい解説は以下です。

a要素を作成して、指定idを持つ要素内に追加
1. 実行結果
参考ドキュメント

a要素を作成して、指定idを持つ要素内に追加

指定セレクタ（今回はid=”id_for_a”）を持つ要素に、作成したa要素を追加するコードです。

<div id="id_for_a">
</div>

// 指定セレクタの要素を取得
var element_id = document.querySelector('#id_for_a');

// a要素作成
var element = document.createElement("a");
element.href="URL";
element.textContent="テキスト";

// a要素を指定idに追加
element_id.appendChild(element);

実行結果

このコードでhtmlにa要素が追加され、表示は画像のようになります。

<!-- 実行結果 -->
<div id="id_for_a">
    <a href="URL">テキスト</a>
</div>

参考ドキュメント

本記事を書く際に参考にしたMDNの関連ドキュメントです。
こちらも併せてご覧ください。

Document.createElement() – Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/Document/createElement