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

Question

我经常使用以下代码来清除元素的内容:

div.innerHTML = "";

但我在Internet Explorer上发现了一种stange行为.似乎div的所有孩子也将自己的孩子移除了!如果我保留对上述div的子项的引用,则在执行之后div.innerHTML = "";,子项的文本节点不再在子项中.

以下代码证明了这种行为(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);

如果单击"添加标记"按钮两次,您将看到一个空的黄色矩形,而不是一个带有短语"Hello wordl!"的矩形.

这是Firefox还是Google Chrome没有使用的错误或规范？

Answer 1

这是非常有趣的行为，并且也发生在IE8和IE11上。这是一个比较简单的测试/证明：

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及其子文本节点，而不是在其他浏览器。

我们不是唯一注意到并发现它的人，嗯，不合适。

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

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>

在规范方面，我们几乎不了解innerHTML旧内容应该如何处理，但是即使Microsoft 确实发明了，这肯定是错误的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>

叹