1

同様の質問がなされています。特定のシナリオに最適なソリューションを明確にすることを目指しています。

すべてのinnerHTMLを別の要素に移動したいと思います。私は持っています：

<div class='mydiv'>
    Any HTML could be here. <span></span><div></div> etc..
</div>

そして、このdivに追加/追加/挿入後/何でもしたい：

<div class='myotherdiv'>
    Any HTML could be here as well. <span></span><div></div> etc..
</div>

innerHTML +=などが唯一の実行可能な解決策ですか？または、ノードリスト全体を最初のdivから移動して、2番目のdivに追加する方法はありますか？私はすべてのノードを個別に取得し、ループして2番目のdivに追加することができます-パフォーマンス上の理由から、これは実行したくありません。ここでいくつかのブードゥーの魔法を探しています。古いブラウザを適用する必要はありません。ライブラリは使用しないでください。

4

2 に答える 2

4

おそらく最も効率的な方法は、DocumentFragment：を使用することです。

// The following assumes the existence of variables div1 and div2
// pointing to the source and destination divs respectively

var frag = document.createDocumentFragment();
var child;
while ( (child = div1.firstChild) ) {
    frag.appendChild(child);
}

div2.appendChild(frag);

while本当にループを避けたい場合extractContents()は、DOM範囲のメソッドを使用できます（注：IE <9ではサポートされていません）。理論的には、スクリプトによって行われるDOM呼び出しの数が減るため、以前のアプローチよりも効率的である可能性がありますが、ベンチマークは行っていません。

var range = document.createRange();
range.selectNodeContents(div1);
var frag = range.extractContents();
div2.appendChild(frag);
于 2012-11-07T15:41:41.843 に答える
0 
var div = document.getElementsByClassName("mydiv"); // this yeilds an array so your going to have to do some sort of looping with it. Unless you assign your div's a id

//since you don't want to loop assuming you assign them id's
//Also avoids looping through the content nodes of your first div

var div_1 = document.getElementById("first_div"); //div to take stuff from
var div_2 = document.getElementById("second_div"); //div your adding to.

var content = div_1.innerHTML; //or innerText if you just want text

//now you have some options
div_2.innerHTML += content; // just add the old content to new div
div_2.appendChild(div_1) // if you want to just put the whole other div into the new div

//if you know whats in your other div, say like a span or a p tag you can use these
div_2.insertBefore("span or p or whatever", content)
div_2.insertAfter(div_2.firstChild, content) //this would insert after the first element inside your second_div
于 2012-11-07T15:46:37.550 に答える