【JavaScript】要素を追加するinsertBeforeとappendChildについて

要素を DOM に追加する insertBefore と appendChild の使い方です。

insertBeforeで要素の前に挿入する

insertBeforeは指定した要素を現在の要素の子要素として対象要素の前に挿入します。文字だけ見ると要素がいっぱいでてきて混乱してしまいますね。

基本構文は以下の通りです。

var insertedElement = parentElement.insertBefore(newElement, referenceElement)

• parentElement : 挿入したい位置の親要素
• newElement : 挿入したい要素 ( 戻り値 insertedElement も同じ )
• referenceElement : この要素の前に newElement が挿入される

例えば以下のような DOM が存在した場合、

<div id="article">
  <div class="title"></div>
  <div class="image"></div>
  <div class="content"></div>
</div>

class="image"要素の前にclass="date"の要素を追加する例は以下の通りです。

var newEle = document.createElement('div');
newEle.classList.add('date');
var parent = document.getElementById('article');
var reference = document.querySelector('.image');
var rtn = parent.insertBefore(newEle, reference);
console.log(rtn);  // <div class="date"></div>

 Node.insertBefore - Web API インターフェイス | MDN

insertBeforeで要素の後に挿入する

要素の前ではなくて要素の後に挿入したい時にinsertAfterを探してしまいがちですがありません。そのような時は nextSibling または nextElementSibling メソッドと組み合わせます。

nextSibling メソッドは要素の次の要素を取得します。そのため、以下のように使用すると結果的に要素の後に挿入することが可能です。次の要素が無い場合には null が返るので、insertBefore は referenceElement が null の場合、末尾に挿入されるため問題ありません

var rtn = parent.insertBefore(newEle, reference.nextSibling);
var rtn = parent.insertBefore(newEle, reference.nextElementSibling);

appendChildについて

insertBefore と似たメソッドですが、appendChildは特定の親ノードの子ノードリストの末尾にノードを追加します。

基本構文は以下の通りです。

var child = element.appendChild(child);

• element : 挿入したいノードリストの親要素
• child : element の下に追加するノード。戻り値も同じ。

例えば以下のようにノードを追加した場合は body の最後に追加されます。

var p = document.createElement("p");
document.body.appendChild(p);

子ノードリストの末尾ではなく、親要素と同じ階層の末尾に挿入したい場合は parentNode と組み合わせて使用します。以下のようにすると element と同じ階層の末尾に挿入されます。

var p = document.createElement("p");
element.parentNode.appendChild(p);

また child が document 中に既に存在している場合、appendChild を実行すると、既存の位置から新しい位置に移動します。同じノードが document 内の別の位置に存在することはありません。

 Node.appendChild - Web API インターフェイス | MDN

---