Question

我正在创建一个JQuery对象（我们将其称为$dummyHTML）并在其中设置一些html内容。然后，我遍历它的每个子节点，包括文本节点，进行一些检查，然后将它们附加到新的不同的JQuery Object（我们将其称为$ 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));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

Answer 1

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

参考文献here：

给定一个表示一组DOM元素的jQuery对象，.contents（）方法使我们可以在DOM树中搜索这些元素的直接子代，并从匹配的元素构造一个新的jQuery对象。

JavaScript节点为空，即使在将其内容附加到其他节点之前

1 个答案: