web-dev-qa-db-ja.com

HTMLElementのすべての子を置き換えますか？

私のコードでは、特定のHTMLコンテナーのすべての子を新しい子のリストに置き換える必要がかなり頻繁にあります。

これを行う最速の方法は何ですか？現在のアプローチでは、すべての新しい要素をDocumentFragmentに収集しています。子を実際に置き換える唯一の方法は、すべての子を1つずつ削除して、フラグメントを追加することです。より速い方法はありませんか？

注：ソリューションはクロスブラウザである必要はありませんが、jQueryなどのサードパーティコンポーネントを必要としないことが望ましいです。ターゲットデバイスはvery遅いCPU上のWebKitなので、リフローを完全に制御する必要があります。

javascriptdhtml
30
Rawler

タイプに関してすべての子を単に置き換えたい場合は、コンテンツを ''に設定して、コードを追加してみませんか？

container.innerHTML = '';
container.appendChild( newContainerElements );

それは基本的にすべての子を可能な限り最速の方法で削除します:)

36
Stefan

InnerHTMLの設定が機能しない場合の考えられる代替策：

while(container.firstChild)
{
  container.removeChild(container.firstChild);
}
container.appendChild(newChild)
1
Tom Kay

それは直接問題を解決するものではありませんが、ほとんどの場合それは使用可能で、おそらくより高性能な方法の1つです。

コンテンツを削除して埋める代わりに、ノード全体を交換することができます。

oldNode.parentElement.replaceChild(newNode, oldNode)

0
The Fool