3

このスクリプトを試してください: http://jsfiddle.net/8da54/1/。Firefox と IE で出力が異なるのはなぜですか?

HTML:

<div id="div1">
<div id="div2"><div id="data">data</div></div>
<div id="div3">a-</div>
</div>

Javascript:

var data = document.getElementById("data");
document.getElementById("div2").innerHTML="";
document.getElementById("div3").appendChild(data);

出力:
FF: a-data
IE: a-

4

2 に答える 2

2

多くのIE.innerHTMLバグの1つであるように見えます。それまでの間、適切な方法で要素を削除できます。

var elem = document.getElementById("div2");
while (elem.firstChild) {
    elem.removeChild(elem.firstChild);
}

http://jsfiddle.net/8da54/2/

于 2012-07-17T19:45:32.423 に答える
-1

あなたが尋ねている質問を調べています。JavaScript の 3 行に関して、FF と IE の 2 つのブラウザの動作が異なるのはなぜですか。

JavaScript は通常、値の型とオブジェクトへの参照のコピーを作成します。この特定のケースでは、ブラウザーに応じて、エンジンは実装に同意しません。したがって、コピーしているのか参照しているのか疑問がある場合。競合を避けるために、可能であればオブジェクトを複製します。

var data = document.getElementById("data").cloneNode(true);
//lot's of intensive work with the cloned 'data'-object, function calls etc.
document.getElementById("div2").innerHTML="";
document.getElementById("div3").appendChild(data);

このようにして、レンダリング ツリーから「データ」オブジェクトを取り出し、結果を挿入する前にパフォーマンスをあまり気にせずに安全に操作できることを確認できます。私の経験では、可能な限りブラウザ DOM (レンダー ツリー) で直接作業することは避けることをお勧めします。

個人的には、明確にするために次の 2 行を保持します。これは、その意図が明確であり、可読性が常に保守性を向上させるためです。特に、パフォーマンスが同じである場合 (IE) は良くありません。

于 2012-07-17T20:16:55.643 に答える