Internet Explorer 9/10中是否存在带有innerHTML =“"“的错误? [英] Is there a bug in Internet Explorer 9/10 with innerHTML=""?

问题描述

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

I often use the following code to clear the content of an element :

div.innerHTML = "";

但是我在Internet Explorer上发现了一个稳定的行为.似乎div的所有孩子也将自己的孩子也删除了！如果我在上面引用了div的子级，则在执行div.innerHTML = "";之后，该子级的文本节点将不再位于该子级中.

But I found a stange behaviour on Internet Explorer. It seems that all children of the div get their own children removed too! If I keep a reference to a child of the div above, after doing div.innerHTML = "";, the child's text node is no longer in the child.

以下代码是此行为的证明( http://jsfiddle.net/Laudp273/) :

The following code is the proof of this behaviour (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！"的矩形.

If you click on the "Add Marker" button twice, you will see an empty yellow rectangle instead of one with the texte "Hello wordl!".

这是Firefox还是Google Chrome不使用的错误或规范吗?

Is this a bug or a specification not used by Firefox nor Google Chrome?

推荐答案

这是非常有趣的行为，并且也发生在IE8和IE11上.这是一个相当简单的测试/证明:

That's very interesting behavior, and happens on IE8 and IE11 as well. Here's a rather simpler 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而不是其他浏览器上丢失了其子文本节点.

After setting the div's innerHTML to "", the span we kept a reference to loses its child text node on IE, and not on other browsers.

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

It doesn't have to be "", either, any new content causes the bug:

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 did 发明了innerHTML，也可以肯定这是错误的.

What little we have in the way of a spec for innerHTML is quite vague on what should happen to the old content, but surely this is wrong, even if Microsoft did invent innerHTML.

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

Whereas removing the nodes via removeNode doesn't cause this behavior:

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>

叹气

sigh

这篇关于Internet Explorer 9/10中是否存在带有innerHTML =“"“的错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！