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上。这是一个相当简单的测试/证明：

＆＃13;

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);

＆＃13;

<!-- 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>

＆＃13;

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

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

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

＆＃13;

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);

＆＃13;

<!-- 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>

＆＃13;

What little we have in the way of a spec for innerHTML对于旧内容会发生什么变得非常模糊，但即使Microsoft 发明innerHTML，这肯定是错误的。

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

＆＃13;

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);

＆＃13;

<!-- 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>

＆＃13;

<强> 叹息

Internet Explorer 9/10中是否存在使用innerHTML =＆＃34;＆＃34;？的错误？

1 个答案: