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错误之一。同时，您可以以正确的方式删除元素：

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

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

于 2012-07-17T19:45:32.423 回答
-1

看着你问的问题。为什么 FF 和 IE 这两个浏览器，对于 JavaScript 的三行表现不同。

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（渲染树）中工作总是一个好主意。

就个人而言，为了清楚起见，我会保留以下两行，因为它们的意图很明显，并且可读性总是增强可维护性。特别是当性能相同时，如果不是更好（IE）。

于 2012-07-17T20:16:55.643 回答