Question

试试这个脚本：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 -

Answer 1

似乎是众多IE .innerHTML错误之一。在此期间，您可以以正确的方式删除元素：

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

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

Answer 2

查看你问的问题。为什么两个浏览器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）。

getElementById（）的另一个令人费解的行为

2 个答案: