jQuery - 差异.remove（）与.html（''）

Question

下面的示例中.remove（）和.html（“”）之间是否有区别？ 我在哪里可以找到推荐的JS代码？

HTML

<div class="wrap"> 
    <div class="content"> <div> ... </div></div> 
</div> 

JS

$('.content').remove(); 

//vs 

$('.wrap').html(''); 

Answer 1

“基本上”他们相同的，

但实际上（如果你是挑剔的东西），这里的区别：

$('.wrap').html(''); 
console.log($('body').html()); // see below 

// <div class="wrap"></div> 

VS ：

$('.content').remove(); 
console.log($('body').html()); // see below 

// <div class="wrap"> 
// 
// </div> 

so .remove()方法删除元素，而使用.html("")，你实际上格式化HTML Element只包含一个空字符串。

为什么.remove()有它的好的部分它在这里解释：http://api.jquery.com/remove/

类似.empty（），在一个.remove（）方法将元素从DOM的。当你想删除元素本身以及其中的所有元素时，使用.remove（）。除了元素本身之外，所有与元素相关的绑定事件和jQuery数据都将被删除。要删除元素而不删除数据和事件，使用.detach（）代替

所以基本上，如果你有一些复杂的东西与你的元素，你只是删除，所有的事件，数据，行为，引用等会垃圾收集和无法利用记忆和获得一些表现。 .detach() -ing他们你不需要重置，即事件处理程序的相同的选择器，你打算在未来某个时候再次将它们包含到DOM中。

为什么上述有趣（为它提.empty()）是什么.html()method does，当"string"作为参数，它的循环槽的所有元素的选择清洁内部节点和数据（以防止内存泄漏） ：

jQuery.cleanData(getAll(elem, false)); 
elem.innerHTML = value; 

后来该循环里面你可以看到，当值包含使用innerHTML成功将其设置：elem = 0 // the innerHTML was successful!! YEY

所以是的，它是使用elem.innerHTML来分配传递的参数值（如果可能的话）。

如果仍然有一个elem匹配（innerHTML不好或trowed错误捕捉），它的作用很简单：this.empty().append(value);

所以让我们看看究竟发生了什么的.empty()方法确实^{（jQ source line 309）}

for (; (elem = this[i]) != null; i++) {  // Loops the selectors 
    if (elem.nodeType === 1) {     // If it's an Element node 
     jQuery.cleanData(getAll(elem, false)); // Prevent memory leaks 
     elem.textContent = "";      // Remove any remaining nodes 
               // using the native textContent 
               // which is from jQ v2 I think. 
    } 
} 

现在是时候看什么宕做的.remove()^{jQ source line 359}：

remove: function (selector, keepData /* Internal Use Only */) { 
    // the .detach() method uses keepData, but not we, 
    // we're only using .remove() as a bound Method to our selector 
    // so `elems>>>this` in the code below will be our fella. 
    var elem, 
    elems = selector ? jQuery.filter(selector, this) : this, 
     i = 0; 
    for (; 
    (elem = elems[i]) != null; i++) { 
     if (!keepData && elem.nodeType === 1) { // yes, no keepData! 
      jQuery.cleanData(getAll(elem));  // remove all data stored 
     } 
     if (elem.parentNode) { // Yes, our element has a parentNode 
      if (keepData && jQuery.contains(elem.ownerDocument, elem)) { //no.. 
       setGlobalEval(getAll(elem, "script")); // not our case... 
      } 
      elem.parentNode.removeChild(elem); // jQ data are removed now go with 
               // the native way of doing things! 
     } 
    } 
    return this; // (maintains Methods chainability...) 
} 

Answer 2

有卸下摆臂之间（）和.html（ “”）在下面的示例中的差？

有没有显著差异，没有，因为在你的例子中唯一.wrap元素包含唯一.content元素。这是只有真正的因为元素的关系。

在这两种情况下，jQuery都将确保发布.content及其后代（如果有）引用的任何数据和事件处理程序，然后删除相关元素。如果你想知道关于速度，答案几乎总是存在有异，所以对你的目标浏览器测试，如果它的事项，但删除节点并设置innerHTML之间的速度差异this answer触摸（答案让我吃惊）。

我在哪里可以找到推荐的JS代码？

在jQuery source code。

---

回复您的评论：

THX为jQuery的链接，当然我有一个看的lib，但我找不到其中的.html（）函数的定义（SRY，我是新来的js）

如果你是新来的JavaScript，我不建议你试着去了解jQuery的源代码，但  —这是非常复杂，并且使用了大量的技巧，以保持SI同时具有很多实用性。

但我只是注意到，因为有混乱在这一点上，是jQuery的html功能不刚刚成立innerHTML有问题的元件。它做的不仅仅是这些，以防止内存泄漏并释放不再需要的数据。目前的血腥细节是in manipulation.js starting on line 407（尽管当然这个行号会随着时间的推移而改变），但是它又是一些先进的东西，我不会在JavaScript教育的早期阶段跳出来。

Answer 3

是的，在你的例子中两者之间是有区别的。

.remove();

使用.remove（）当您想要删除元素本身以及其中的所有元素时。所以在你的情况下，只有<div class="content"> <div>从DOM中删除。它将成为：

<div class="wrap"> 
... </div></div> 
</div> 

.html('');

用于设置元素的含量。在你的情况下，所有div里面的.wrap被替换为''。它将成为：

<div class="wrap"></div>