JavaScriptで要素を追加する方法についてまとめました。
目次
要素の追加方法一覧
お急ぎの方は、次の表を参考にしてください。
| No | 追加位置 | 追加方法 |
|---|---|---|
| 1 | 指定した要素の前 | 親要素.insertBefore(追加する要素, 基準となる要素) |
| 2 | 指定した要素の後 | 親要素.insertBefore(追加する要素, 基準となる要素.nextSibling) |
| 3 | 親要素の最初の子要素 | 親要素.insertBefore(追加する要素, 親要素.firstChild) |
| 4 | 親要素の最後の子要素 | 親要素.appendChild(追加する要素)
親要素.insertBefore(追加する要素, null) |
追加方法の詳細
1. 指定した要素の前に追加する
ある要素の前に追加するには、次のように指定します。
書式
親要素.insertBefore(追加する要素, 基準となる要素)
サンプル
次のhtmlの 子要素3の前に子要素2を追加します。
html
|
1 2 3 4 |
<div id="parent-div"> <p id="child-p1">子要素１</p> <p id="child-p3">子要素３</p> </div> |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// ---------------------------- // 追加する要素を作成します // ---------------------------- var newElement = document.createElement("p"); // p要素作成 var newContent = document.createTextNode("子要素２"); // テキストノードを作成 newElement.appendChild(newContent); // p要素にテキストノードを追加 newElement.setAttribute("id","child-p2"); // p要素にidを設定 // ---------------------------- // 子要素３の前に追加します // ---------------------------- // 親要素（div）への参照を取得 var parentDiv = document.getElementById("parent-div"); // 子要素３への参照を取得 var childP3 = document.getElementById("child-p3"); // 追加 parentDiv.insertBefore(newElement, childP3); |
追加後のhtml（子要素2が追加されました）
|
1 2 3 4 5 |
<div id="parent-div"> <p id="child-p1">子要素１</p> <p id="child-p2">子要素２</p> <p id="child-p3">子要素３</p> </div> |
2. 指定した要素の後に追加する
要素を後に追加する場合も、insertBefore を使用します。
ん？後だから insertAfter では？？と思ってしまいますが、残念ながら insertAfter というメソッドは存在しません。
書式
親要素.insertBefore(追加する要素, 基準となる要素.nextSibling)
サンプル
次のhtmlの 子要素1の後に子要素2を追加します。
html
|
1 2 3 4 |
<div id="parent-div"> <p id="child-p1">子要素１</p> <p id="child-p3">子要素３</p> </div> |
javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// ---------------------------- // 追加する要素を作成します // ---------------------------- var newElement = document.createElement("p"); // p要素作成 var newContent = document.createTextNode("子要素２"); // テキストノードを作成 newElement.appendChild(newContent); // p要素にテキストノードを追加 newElement.setAttribute("id","child-p2"); // p要素にidを設定 // ---------------------------- // 子要素１の後に追加します // ---------------------------- // 親要素（div）への参照を取得 var parentDiv = document.getElementById("parent-div"); // 子要素１への参照を取得 var childP1 = document.getElementById("child-p1"); // 追加 parentDiv.insertBefore(newElement, childP1.nextSibling); |
追加後のhtml（子要素2が追加されました）
|
1 2 3 4 5 |
<div id="parent-div"> <p id="child-p1">子要素１</p> <p id="child-p2">子要素２</p> <p id="child-p3">子要素３</p> </div> |
3. 親要素の最初の子要素を追加する
親要素の最初の子要素として、要素を追加する場合は insertBefore を使用します。
ポイントは、要素指定の際に、firstChild を指定します。
書式
親要素.insertBefore(追加する要素, 親要素.firstChild)
サンプル1
次のhtmlの 親要素div（id=”parent-div”）の最初の子要素（child-p1）を追加します。
html
|
1 2 3 4 |
<div id="parent-div"> <p id="child-p2">子要素２</p> <p id="child-p3">子要素３</p> </div> |
javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// ---------------------------- // 追加する要素を作成します // ---------------------------- var newElement = document.createElement("p"); // p要素作成 var newContent = document.createTextNode("子要素１"); // テキストノードを作成 newElement.appendChild(newContent); // p要素にテキストノードを追加 newElement.setAttribute("id","child-p1"); // p要素にidを設定 // ---------------------------- // 親要素の最初の子要素を追加します // ---------------------------- // 親要素（div）への参照を取得 var parentDiv = document.getElementById("parent-div"); // 追加 parentDiv.insertBefore(newElement, parentDiv.firstChild); |
追加後のhtml（子要素1が追加されました）
|
1 2 3 4 5 |
<div id="parent-div"> <p id="child-p1">子要素１</p> <p id="child-p2">子要素２</p> <p id="child-p3">子要素３</p> </div> |
お気付きの方もいるかもしれませんが、上記の例の場合は、”1. 指定した要素の前に追加する”の insertBefore で指定要素を子要素2を指定した場合でも、同じことができます。
今回の親要素の firstChild が効果を発揮するのは、
動的に表示内容が変化し、親要素に子要素があったり無かったりする場合です。
サンプル2
親要素の子要素が無い場合に、親要素の子要素を追加します
html
|
1 |
<div id="parent-div"></div> |
javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// ---------------------------- // 追加する要素を作成します // ---------------------------- var newElement = document.createElement("p"); // p要素作成 var newContent = document.createTextNode("子要素１"); // テキストノードを作成 newElement.appendChild(newContent); // p要素にテキストノードを追加 newElement.setAttribute("id","child-p1"); // p要素にidを設定 // ---------------------------- // 親要素の最初の子要素を追加します // ---------------------------- // 親要素（div）への参照を取得 var parentDiv = document.getElementById("parent-div"); // 追加 parentDiv.insertBefore(newElement, parentDiv.firstChild); |
追加後のhtml
|
1 2 3 |
<div id="parent-div"> <p id="child-p1">子要素１</p> </div> |
このように、親要素が子要素を持っていない場合でも、firstChild を使用するとinsertBefore で子要素を追加することができます。
と、さらに上記の例の場合、”appendChild を使うと同じことができる” とお気付きの方もいらっしゃると思います。
今回使用した insertBeforeメソッドを使用して、親要素のfirstChildを用いる方法の利点は、親要素が子要素を持っている/ないに関わらず、必ず最初の子要素として追加できる点です。
appendChildメソッドの本来の動作は、”親要素の最後の子要素として追加する” なので、上記の例のように、親要素が子要素を持たない場合は、最初の子要素として追加されますが、もし子要素を持っていた場合は、最後の子要素として追加されるため、”最初の子要素として追加”という仕様が満たせません。
それでも、親要素が子要素を持っているかを調べて、appendChildとinsertBeforeを使い分ける方法もありますが・・・メンドイですよね。
なので、”要素を親要素の最初の子要素として追加する” という仕様の場合は、今回の方法をオススメします。
4. 親要素の最後の子要素を追加する
最後の子要素として追加する方法は、２つあります。
方法1
appendChildを使用する。
方法2
insertBeforeでnullを指定して使用する。
個人的には、方法1 をオススメします。理由は、appendChild vs insertBefore をご覧ください。
4-1. appendChild を使って最後の要素を追加する
書式
親要素.appendChild(追加する要素)
サンプル
次のhtmlの 親要素div（id=”parent-div”）の最後の子要素（child-p3）を追加します。
html
|
1 2 3 4 |
<div id="parent-div"> <p id="child-p1">子要素１</p> <p id="child-p2">子要素２</p> </div> |
javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// ---------------------------- // 追加する要素を作成します // ---------------------------- var newElement = document.createElement("p"); // p要素作成 var newContent = document.createTextNode("子要素３"); // テキストノードを作成 newElement.appendChild(newContent); // p要素にテキストノードを追加 newElement.setAttribute("id","child-p3"); // p要素にidを設定 // ---------------------------- // 親要素の最後の子要素を追加します // ---------------------------- // 親要素（div）への参照を取得 var parentDiv = document.getElementById("parent-div"); // 追加 parentDiv.appendChild(newElement); |
追加後のhtml
|
1 2 3 4 5 |
<div id="parent-div"> <p id="child-p1">子要素１</p> <p id="child-p2">子要素２</p> <p id="child-p3">子要素３</p> </div> |
4-2. insertBefore を使って最後の要素を追加する
書式
親要素.insertBefore( 追加する要素, null )
サンプル
次のhtmlの 親要素div（id=”parent-div”）の最後の子要素（child-p3）を追加します。
html
4-1と同じです。
javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// ---------------------------- // 追加する要素を作成します // ---------------------------- var newElement = document.createElement("p"); // p要素作成 var newContent = document.createTextNode("子要素３"); // テキストノードを作成 newElement.appendChild(newContent); // p要素にテキストノードを追加 newElement.setAttribute("id","child-p3"); // p要素にidを設定 // ---------------------------- // 親要素の最後の子要素を追加します // ---------------------------- // 親要素（div）への参照を取得 var parentDiv = document.getElementById("parent-div"); // 追加 parentDiv.insertBefore(newElement, null); |
追加後のhtml
|
1 2 3 4 5 |
<div id="parent-div"> <p id="child-p1">子要素１</p> <p id="child-p2">子要素２</p> <p id="child-p3">子要素３</p> </div> |
まとめ
要素の追加方法について記載しました。
どのケースでも、insertBeforeメソッドが使えるので便利ですね！
メソッド名に惑わされず？ 要素の追加は、insertBefore メソッドがオススメです。