innerHTML="" 在 Internet Explorer 9/10 中是否存在错误？

Question

我经常使用下面的代码来清除一个元素的内容：

div.innerHTML = "";

但我在 Internet Explorer 上发现了一个奇怪的行为。似乎 div 的所有 children 也都被删除了！如果我保留对上面 div 的 child 的引用，在执行 div.innerHTML = ""; 之后，child 的文本节点不再在 child 中。

下面的代码就是这种行为的证明（http://jsfiddle.net/Laudp273/）：

function createText() {
    var e = document.createElement("div");
    e.textContent = "Hello World!";
    return e;
}

var mrk = document.createElement("div");
mrk.appendChild(createText());
mrk.style.border = "4px solid yellow";

var container = null;

function addDiv() {
    if (container) {
        container.innerHTML = "";
    }
    var e = document.createElement("div");
    e.appendChild(mrk);
    container = e;
    document.body.appendChild(e);
}

var btn = document.createElement("button");
btn.textContent = "Add marker";
btn.addEventListener(
    "click",
    function() {
        addDiv();
    },
    false
);
document.body.appendChild(btn);

如果您点击 "Add Marker" 按钮两次，您将看到一个空的黄色矩形，而不是带有文本 "Hello wordl!".

的矩形

这是 Firefox 或 Google Chrome 未使用的错误或规范吗？

Answer 1

这是非常有趣的行为，在 IE8 和 IE11 上也会发生。这是一个更简单的 test/proof:

var span = document.createElement('span');
span.appendChild(document.createTextNode("This disappears on IE"));

var div = document.createElement('div');
div.appendChild(span);
snippet.log("[before] span's childNodes.length: " + span.childNodes.length);
div.innerHTML = "";
snippet.log("[after] span's childNodes.length: " + span.childNodes.length);

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

将 div 的 innerHTML 设置为 "" 后，我们保留的 span 引用在 IE 上丢失了其子文本节点，而在其他浏览器。

We're not the only ones to notice this and find it, um, inappropriate.

也不一定是""，任何新内容都会导致错误：

var span = document.createElement('span');
span.appendChild(document.createTextNode("This disappears on IE"));

var div = document.createElement('div');
div.appendChild(span);
snippet.log("[before] span's childNodes.length: " + span.childNodes.length);
div.innerHTML = "New content"; // <== Not ""
snippet.log("[after] span's childNodes.length: " + span.childNodes.length);

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

What little we have in the way of a spec for innerHTML 对旧内容应该发生什么非常模糊，但这肯定是错误的，即使微软 did 发明了 innerHTML.

而通过 removeNode 删除节点不会导致此行为：

var span = document.createElement('span');
span.appendChild(document.createTextNode("This disappears on IE"));

var div = document.createElement('div');
div.appendChild(span);
snippet.log("[before] span's childNodes.length: " + span.childNodes.length);
while (div.firstChild) {
  div.removeChild(div.firstChild);
}
snippet.log("[after] span's childNodes.length: " + span.childNodes.length);

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

感叹

innerHTML="" 在 Internet Explorer 9/10 中是否存在错误？

Is there a bug in Internet Explorer 9/10 with innerHTML=""?

javascript

internet-explorer-9

internet-explorer-10