☰

ライブラリを使用せずに JavaScript で要素の後に別の要素を挿入するにはどうすればよいでしょうか? 質問する

tag-icon • tag-icon javascript dom insert append
ライブラリを使用せずに JavaScript で要素の後に別の要素を挿入するにはどうすればよいでしょうか? 質問する

JavaScript にはありますが、 jQuery や他のライブラリを使用せずに、要素の後にinsertBefore()要素を挿入するにはどうすればよいでしょうか?

ベストアンサー1

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

referenceNode後に配置するノードはどこでしょうかnewNode。referenceNode親要素内の最後の子ノードであれば問題ありませreferenceNode.nextSiblingんnull。insertBeforeリストの末尾に追加することでそのケースを処理します。

それで：

function insertAfter(referenceNode, newNode) {
    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>

おすすめ記事