[解決済み] JavaScriptでライブラリを使わずに、他の要素の後に要素を挿入するにはどうしたらいいですか？

質問

そこにあるのは insertBefore() を挿入することができます。 の後に jQueryや他のライブラリを使用せずに、他の要素を使用できますか？

どのように解決するのですか？

referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);

ここで referenceNode は置きたいノード newNode の後にあります。もし referenceNode が親要素内の最後の子であっても、それは問題ありません。 referenceNode.nextSibling になります。 null と insertBefore は、リストの末尾に追加することでそのケースを処理します。

だから

function insertAfter(newNode, referenceNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

以下のスニペットを使ってテストすることができます。

function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

var el = document.createElement("span");
el.innerHTML = "test";
var div = document.getElementById("foo");
insertAfter(div, el);

<div id="foo">Hello</div>