为什么从 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 为何表现不同，以避免将来出现任何相关问题。

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

Answer 1

在我看来，IE 的行为是正确的，而其他浏览器则非常神奇。 这一切都源于你打电话的时候：

targetEl.html('<p class="dummy">Transferring...</p>');

这会从页面中删除sourceEl 元素。所以它不再存在。我猜其他浏览器正在记住 DOM 对象，因为仍然有一个变量引用它。但 IE 将其识别为页面上不再存在，因此它丢失了引用。

正如您所提到的，我建议您在单击时克隆对象。这会在 JavaScript 中创建一个新对象。幸运的是，覆盖相同的变量是可行的。

    sourceEl = sourceEl.clone();

http://jsfiddle.net/AbJQE/3/

编辑 您还可以在插入新的源对象之前删除任何可能存在的原始源对象。这解决了触发快乐点击者的问题：

setTimeout(function() {
    $('.source').remove();
    targetEl.html('').append(sourceEl);
}, 750);

Answer 2

首先让我们强调重要的部分：

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

---

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

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

其他浏览器将简单地分离所有childNodes（当没有更多活动引用时，它们将被GC收集）并将传递的html字符串解析为DOM元素，将它们附加到DOM。另一方面，Jscript 也会删除分离的childNodes'innerHTML/childNodes。查看此fiddle 以获取插图。

该元素实际上仍然存在于 IE 中并附加到 DOM 中：

它不再有childNodes。

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

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