jQuery对象vs htmlString

Question

html段：

<div class="container">
    <div id="one">Div #1</div>
    <div id="two">Div #2</div>
</div>

如果我将$ p设置为jQuery对象，如下所示：

$p = $('<p>whatever you like</p>');
//$p = '<p>whatever you like</p>';
$('#one').after($p);
$('#two').after($p);

然后结果将是：

Div #1
Div #2
whatever you like

我将$ p设置为htmlString，如下所示：

//$p = $('<p>whatever you like</p>');
$p = '<p>whatever you like</p>';
$('#one').after($p);
$('#two').after($p);

然后结果将是：

Div #1
whatever you like
Div #2
whatever you like

当我使用object时，jQuery不会克隆对象，只是移动它;当我使用htmlString时，它每次都会相应地创建一个新对象。

我想知道具体原因。如果能够提供任何参考，我们将不胜感激。

非常感谢！

Answer 1

  

当我使用object时，jQuery不会克隆对象，只是移动它;当我使用htmlString时，它每次都会相应地创建一个新对象。

正确。第一次调用after时，将jQuery对象中的元素放入DOM中。第二次，他们得到移动。这是标准的DOM行为。

在the after page上有间接记录：

  

如果以这种方式选择的元素被插入到DOM中其他位置的单个位置，那么它将被移动而不是克隆：

这与DOM方法appendChild和insertBefore的标准行为相呼应。

请注意，如果您在其中包含多个元素的jQuery集上调用after，则您传入的元素将移动到之后第一个目标元素然后克隆以追踪剩余的目标元素：

  

重要：但是，如果有多个目标元素，则将为每个目标创建插入元素的克隆副本，但最后一个目标除外。

Example

第二种行为是特定于jQuery的（尽管有足够的挥手可能会认为它与DOM处理文档片段的方式类似，并且在更现代的浏览器中，模板元素）。

Answer 2

当$ p是字符串'<p>whatever you like</p>'并使用.after()附加它时，该字符串将添加到HTML中。它永远不是一个jQuery对象。

当$ p是jQuery对象$('<p>whatever you like</p>');并且您使用其中一个追加函数（如.after()）附加它时，您将在页面上移动它。如果您不想移动它，请克隆它。

$('#one').after($p.clone());
$('#two').after($p.clone());

<强> Demo