javascript - 为什么元素从 DOM 中移除后在 IE 中为空？

Question

以下 HTML 和 JavaScript 摘自此 jsFiddle 的部分内容: http://jsfiddle.net/stephenjwatkins/2j3ZB/3/

HTML:

<p class="source">
    Source
</p>
<div id="target">
    <p class="dummy">
        Target
    </p>
</div>
<button id="transfer-button">Transfer</button>

JavaScript:

var sourceEl = $('.source');
var targetEl = $('#target');

$('#transfer-button').click(function() {
    targetEl.html('<p class="dummy">Transferring...</p>');
    setTimeout(function() {
        // Source element will be empty on second attempt to append
        targetEl.html('').append(sourceEl);
    }, 750);
    return false;
});​

请注意，setTimeout 和虚拟文本仅用于视觉指示。

可以看到，在源元素被添加到 DOM 中并从中删除一次之后，IE(所有版本)将在任何进一步添加时向 DOM 添加一个空元素；而所有其他浏览器将添加正确的非空元素。

另一个增加困惑的方面是 sourceEl 仍然有元素信息(例如 sourceEl.attr('class') 将返回“source”)。

我知道缓解该问题的方法(例如 sourceEl.clone())，但最好能更好地理解为什么 IE 的行为不同以避免任何相关问题 future 。

是什么导致源元素在替换元素后在 IE 中唯一为空？

Answer 1

首先让我们强调一下重要的部分:

1. (第一次点击)获取 source 元素并将其放入 target 元素内；
2. (第二次点击)清空 target 元素并向其添加一个新的子元素 (p.dummy)，有效地从 source 中移除DOM；
3. 清空 target 元素并尝试重新附加 source，它不再存在于 DOM 中。

---

乍一看，这在任何浏览器中都行不通，因为 source 元素已从 DOM 中删除。这里的“魔法”是 JavaScript 的 Garbage Collector .浏览器看到 sourceEl 仍然在范围内(在 setTimeout 闭包内)并且不会丢弃 sourceEl jQuery 对象内引用的 DOM 元素。

这里的问题不是 JScript(Microsoft 的 Javascript 实现)的垃圾收集器，而是 JScript 在设置元素的 innerHTML 时如何处理 DOM 解析。

其他浏览器将简单地分离所有 childNode(当没有更多事件引用时，GC 将收集它们)并将传递的 html 字符串解析为 DOM 元素，并将它们附加到 DOM。另一方面，Jscript 也会删除分离的 childNode 的 innerHTML/childNode。检查这个fiddle举例说明。

事实上，该元素仍然存在于 IE 中并附加到 DOM:

它只是不再有childNode了。

为了防止这种行为，.clone()元素(如问题中所述)或 .detach()如果您打算重新使用该元素而不是“覆盖”它，则在对其父级调用 .html() 之前它。

这是一个 fiddle在覆盖元素之前使用 .detach()，在所有浏览器中都可以正常工作。