ライブラリを使用せずに JavaScript で要素を次々に挿入するにはどうすればよいですか?

ライブラリを使用せずに JavaScript で他の要素の後に要素を挿入する

JavaScript では、指定された参照の前に要素を挿入するための insertBefore() メソッドが存在します。ノード。ただし、jQuery や他のライブラリに依存せずに別の要素の後に要素を挿入したい場合はどうすればよいでしょうか?

回答

必要なものは次のスニペットです:

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

その仕組みは次のとおりです:

• referenceNode は
• referenceNode.parentNode は、referenceNode の親ノードを取得します。
• referenceNode.nextSibling は、referenceNode の次の兄弟を識別します。 ReferenceNode が最後の子の場合、nextSibling は null になります。このケースは、子リストの末尾に追加する insertBefore() によって適切に処理されます。

サンプル コード

このソリューションを使用するには、次のことができます。次の関数を定義します:

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

この関数は次のように使用できます。 so:

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

このコードは、ID が "foo" の div の後に、テキスト "test" を含む span 要素を挿入します。

以上がライブラリを使用せずに JavaScript で要素を次々に挿入するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。