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

外部ライブラリを使用せずに JavaScript に要素を次々に挿入する

JavaScript の領域では、プログラマは DOM 内の要素を操作しようとすることがよくあります。 jQuery や他のライブラリはそのようなタスクを簡素化しますが、外部の依存関係に依存せずに要素の挿入を実現することは可能です。

質問:

要素を別の要素の後に挿入するにはどうすればよいですか?のようなライブラリの助けを借りずに JavaScript でjQuery?

答え:

既存のノードの後に​​要素を挿入するために、JavaScript には insertBefore() メソッドが用意されています。ただし、参照ノードの前に挿入するという insertBefore() の主な目的とは異なり、これを活用して目的を達成できます。

次のスニペットはその方​​法を示しています。

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

ここで:

• referenceNode は、その後に新しい要素を挿入する要素を表します
• parentNode参照ノードの親要素を取得します
• nextSibling は参照ノードの直後の要素を参照します。参照ノードが最後の子の場合、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);

このコードtest を挿入します。

の後の要素ID が「foo」の要素。

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