javascript - Javascript は既存の HTML 要素にフラグメントを追加します

Question

複数の childNode をループに追加する DOM フラグメントを作成しました。

fragment.appendChild( clone )

このフラグメントを使用して、既にそれらのノードを含む既存の HTML 要素を置き換えたいと考えています。

使うことができます

myContainer.appendChild(fragment)

ただし、これはループでも行われ、フラグメントが何度も追加されます。フラグメントを取得して myContainer に追加し、myContainer の古い子も削除するにはどうすればよいですか。

ありがとうございました。

score 1 · Accepted Answer

あなたはおそらく欲しい：

while (myContainer.childNodes.length > 0) {
    myContainer.removeChild(myContainer.childNodes[0]);
}

myContainer.appendChild(fragment);

score 0 · Accepted Answer

ループが終了した後にフラグメントを追加できませんか？

現在の子ノードを削除する場合は、それらすべてを循環してremoveChild関数を使用するか、要素のinnerHTMLを空の文字列に設定することができます。フラグメントを追加する前にinnerHTMLをリセットすると、問題ないはずです。

myContainer.innerHTML = "";
myContainer.appendChild(fragment);

score 0 · Accepted Answer

私があなたを正しく理解しているなら、あなたはいくつかの子を持つ新しいノードを作成していて、この新しいノードをあなたのページの既存のノードに置き換えたいと思っています。

次のいずれかを実行できます。

既存のノードのすべての子を削除し、既存のノードに新しい子を追加します
すべての子を別のノードに追加し（これがあなたが行っていることだと思います：に追加しますfragment）、次に既存のノードを削除し、その場所にノードを追加します。

removeChildおよびappendChildを参照してください

3 に答える 3