jQuery的追加和包装之间的差异

Question

我没有得到.wrap没有的.append。

如果 wrap 的主要目的是在元素周围添加内容，我可以轻松停止使用.wrap并使用.append代替，对吧？

所以，我正在使用这个测试代码追加：

<script type="text/javascript">

$(document).ready(function(){

    var $theWrapper = $('<div class="im-the-wrapper" />');
    var $theContent = $('<p>Me</p>');

    console.log($theWrapper.get(0));
    console.log($theContent.get(0));

    $('body').append($theContent);

    $theWrapper.append($theContent);

});

</script>

结果：

这个测试代码 wrap 东西：

<script type="text/javascript">

$(document).ready(function(){

    var $theWrapper = $('<div class="im-the-wrapper" />');
    var $theContent = $('<p>Me</p>');

    console.log($theWrapper.get(0));
    console.log($theContent.get(0));

    $('body').append($theContent);

    $theContent.wrap($theWrapper);

});

</script>

结果：

我认为他们都会返回完全相同的对象，但他们不会。背景中真的发生了什么？

Answer 1

element.wrap(wrapper)基本上是这样做的：

element.before(wrapper);
wrapper.append(element);

这就是为什么当你使用wrap时元素没有丢失，但是当你手动完成而没有先在元素之前附加包装器时，你最终只是从DOM中删除元素。

Answer 2

append将内容插入到所选节点末尾的DOM中。

wrap将所选内容包含在另一个节点中，不一定与DOM有任何关系。

Here is a demo（检查结果）

Answer 3

使用您的第一个代码，您就是......

• 将内容放入DOM，
• 将内容从DOM中取出并放入包装器（不在DOM中）。

有了第二个，你就是......

• 将内容放入DOM，
• 然后将其包装到位，以便包装器也在DOM中结束

---

考虑到你的例子，比其中任何一个更好的解决方案是......

• 将内容附加到包装器
• 然后将包装器附加到DOM

$theWrapper.append($theContent).appendTo("body");

这种方式发生的操作较少。

---

.wrap()方法实际上仅在已经存在需要包装在新元素中的某些内容时使用。