JavaScript:指定したノードの次に、新しく作成したノードを追加する insertAfter を作ってみた

イントロダクション

JavaScript で HTML 文書の構造を操作するときに、指定したノードの次に新しく作成したノードを追加したいというケースが出てくると思います。

指定したノードの前に新しいノードを追加するメソッド「Node.insertBefore」は用意されていますが、その逆の指定したノードの前に新しいノードを追加するメソッド「insertAfter 」は用意されていません。

しかしながら、MDN の「Node.insertBefore」のページを見ると、insertAfter を実装するためのサンプルコードが書かれています。



引用ここから ---

There is no insertAfter method. It can be emulated by combining the insertBefore method with nextSibling.

In the previous example, sp1 could be inserted after sp2 using:
parentDiv.insertBefore(sp1, sp2.nextSibling);

If sp2 does not have a next sibling, then it must be the last child — sp2.nextSibling returns null, and sp1 is inserted at the end of the child node list (immediately after sp2).

引用ここまで ---


このコードを参考に 指定したノードの次に、新しく作成したノードを追加する insertAfter を作ってみました。

コード

        /*
        指定した要素の次に新しい要素を挿入する

        newElement : 新しい要素
        referenceElement : 新しい要素の前の要素となる要素

        戻り値：挿入された要素(newElementと同じ）
        */
        function insertAfter(newElement, referenceElement) {

            return referenceElement.parentNode.insertBefore(newElement, referenceElement.nextSibling);
        }

newElement を referenceElement の次に挿入します。
通常 referenceElement の 親に対して要素を挿入するので、親として referenceElement.parentNode を指定しています。