【javascript】要素の子要素にタグを追加する方法

要素の子要素にタグを追加したい場合の方法について紹介していきたいと思います。

要素を追加したりする作業はわりと多いと思うので覚えておくとよいと思います。

javascriptを勉強し始めた初心者向けの内容になっています。

既存の要素の子要素にタグを追加する

イメージとしては下記のようにdivのidであるelの中にタグを追加します。

<div id="el">
	<div id="el_child" class="el_child" name="name01">テキスト</div>
</div>

html

<div id="el"></div>

javascript

let el = document.createElement('div');
el.id = "el_child";
el.className = "el_child";
el.setAttribute("name", "name01");
el.innerHTML = "テキスト";
let pr = document.getElementById('el');
pr.appendChild(el);

解説

createElement

let el = document.createElement('div');

createElementはタグを追加したい場合に指定するメソッドになります。

idを追加

el.id = "el_child";

さきほど追加したタグにidを追加します。

クラス名を追加

el.className = "el_child";

さきほど追加したタグにクラス名を追加します。

属性を追加

el.setAttribute("name", "name01");

さきほど追加したタグに属性と値を追加します。

テキストを追加

el.innerHTML = "テキスト";

テキストを追加する場合は「innerHTML」を使って追加します。

既存の要素を取得

let pr = document.getElementById('el');

既存の「el」が指定されているidを取得します。

要素に子要素を追加する

pr.appendChild(el);

要素の子要素にタグを追加する場合は「appendChild」を使います。