即使在将其内容附加到不同节点之前，Javascript 节点也是空的答案

【问题标题】：Javascript node empty even before appending it's contents to a different node即使在将其内容附加到不同节点之前，Javascript 节点也是空的
【发布时间】：2019-05-27 21:04:04
【问题描述】：

我正在创建一个 JQuery 对象（我们称之为 $dummyHTML）并在其中设置一些 html 内容。然后我遍历它的每个子节点，包括文本节点，进行一些检查，并将它们附加到一个新的不同 JQuery 对象（我们称之为 $refinedHTML）。

但问题是$dummyHTML 的内容在我将它们附加到$refinedHTML 之前似乎是空的！

现在，我知道 JQuery append 函数不会复制节点，它实际上将节点转移到另一个 JQuery 对象。所以我猜append 函数会在我的意思之前触发？

这是一个缩小的问题示例。

var $dummyHTML = $('<div/>');
$dummyHTML.html('Hello there, <span>myself!</span>');

var $refinedHTML = $('<div/>');

console.log($dummyHTML[0]);
$dummyHTML.contents().each(function() {
	$refinedHTML.append($(this));
});

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

但如果我删除 .contents 部分，程序将按预期运行。

【问题讨论】：

"在我的意思之前追加函数触发器？" 不，控制台日志触发的时间比你想象的要晚。
控制台是异步的。如果您记录的是实际值而不是引用（console.log($dummyHTML[0].innerHTML);，您会看到正确的值。当您记录引用时，元素的内容会在对象属性实际列出到控制台之前发生变化，因此误导性结果。
@Teemu 这值得写为答案，请这样做。
@IslamElshobokshy 这更像是stackoverflow.com/questions/23429203/…的复制品
@Teemu 但你的答案比你提到的链接中的答案更直观^^

标签： javascript jquery append

【解决方案1】：

.contents() 提取 DOM 元素 的内容。当您动态创建对象时，它还不是 DOM 元素，因此.contents() 将不起作用，但您可以操作该对象其他方式的数据。

参考here：

给定一个表示一组 DOM 元素的 jQuery 对象，.contents() 方法允许我们在 DOM 树中搜索这些元素的直接子元素，并从匹配的元素构造一个新的 jQuery 对象。

【讨论】：