Javascript jQuery和x27之间的差异；s追加和换行

我没有得到

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

$（文档）.ready（函数（）{
var$theWrapper=$（''）；
var$theContent=$（“Me
”）；
log（$theWrapper.get（0））；
log（$theContent.get（0））；
$（'body'）。追加（$theContent）；
$theWrapper.append（$theContent）；
});

结果:

这个测试代码用于包装东西：

$（文档）.ready（函数（）{
var$theWrapper=$（''）；
var$theContent=$（“Me
”）；
log（$theWrapper.get（0））；
log（$theContent.get（0））；
$（'body'）。追加（$theContent）；
$theContent.wrap（$theWrapper）；
});

结果:

我以为它们都会返回完全相同的对象，但它们没有。背景中到底发生了什么？

元素。wrap（包装器）

基本上是这样做的：

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

---

这就是为什么当您使用

wrap

时元素不会丢失，但是当您手动执行此操作时，没有首先在元素之前附加包装器，您最终只是从DOM中删除元素。

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

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

第二个，你是

• 将内容放入DOM中
• 然后将其包装到位，这样包装器也会出现在DOM中

---

根据您的示例，比这两种方法都好的解决方案是

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

这样做的操纵更少

---

---

.wrap（）

方法实际上只在已经存在需要在新元素中包装的内容时使用。

append

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

wrap

将所选内容封装在另一个节点中，不一定与DOM有任何关系

---

（检查结果）

您正在追加，然后重新追加。。。我会这样做：

$（'body'）.append（$theWrapper.append（$theContent））

在实际包装或追加之前，您意识到您正在登录控制台，对吗？特拉维斯，这是一件奇怪的事情。。。日志确实会根据我使用的内容而变化。日志有时会在您记录的变量发生变化后更新，这很奇怪。

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

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