1

我没有得到什么.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>

结果：

换行结果

这个测试代码来包装东西：

<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>

结果：

换行结果

我以为他们都会返回完全相同的对象，但事实并非如此。后台到底发生了什么？

4

3 回答 3

2

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

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

这就是为什么当你使用wrap元素时不会丢失，但是当你手动执行它而不首先在元素之前附加包装器时，你最终只会从 DOM 中删除元素。

于 2013-04-22T18:11:38.430 回答
1

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

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

这是一个演示（检查结果）

于 2013-04-22T18:14:42.540 回答
0

使用您的第一个代码，您将...

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

有了第二个，你...

  • 将内容放入 DOM，
  • 然后将其包装到位，以便包装器最终也出现在 DOM 中

鉴于您的示例，比其中任何一个更好的解决方案是...

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

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

以这种方式发生的操纵较少。

该.wrap()方法实际上仅在已经存在需要包装在新元素中的东西时使用。

于 2013-04-22T18:12:43.280 回答