Question

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

HTML

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

JS

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

//vs

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

Answer 1

以下示例中.remove（）和.html（“”）之间是否有区别？

没有重要的区别，不，因为在您的示例中，唯一的.wrap元素包含唯一的.content元素。由于元素的关系，这是唯一为真。

在这两种情况下，jQuery将确保释放.content及其后代（如果有）引用的任何数据和事件处理程序，然后删除有问题的元素。如果您对速度有疑问，答案几乎总是 它会有所不同，因此如果重要，请测试目标浏览器 ，但this answer触及删除节点和设置innerHTML之间的速度差异（答案让我感到惊讶）。

我在哪里可以找到引用的JS代码？

在jQuery source code。

重新评论：

对于jQuery链接，当然我看了一下lib，但我找不到.html（）函数的定义（sry，我是js的新手）

如果您不熟悉JavaScript，我建议您不要尝试理解jQuery源代码 - 它的非常很复杂，并且使用了很多技巧来保持大小不变很多实用。

但我要注意，因为在这一点上存在混淆，jQuery的html函数不会只在有问题的元素上设置innerHTML。它做的远不止这些，以防止内存泄漏并释放不再需要的数据。目前的血腥细节是in manipulation.js starting on line 407（当然，这个行号会随着时间的推移而改变），但同样，它是我在JavaScript教育中不会早期发展的高级内容。

Answer 2

＆＃34;基本上＆＃34; 他们相同，

但实际上（如果你对某些东西很挑剔），这就是区别：

$('.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>

所以.remove()方法删除了该元素，在使用.html("")时，您实际上将HTML Element格式化为仅包含空字符串。

为什么.remove() 有好的部分，请在此处解释：http://api.jquery.com/remove/

与.empty（）类似，.remove（）方法从DOM中获取元素。如果要删除元素本身以及其中的所有内容，请使用.remove（）。除了元素本身之外，还删除了与元素关联的所有绑定事件和jQuery数据。要删除元素而不删除数据和事件，请使用.detach（）代替

所以基本上如果你有一些与你刚删除的元素相关的复杂内容，你的所有事件，数据，动作，引用等都将被垃圾收集，并且无法访问内存并获得一些性能。 .detach() - 他们不需要重置，即您计划在将来的某个时间点再次将其包含在DOM中的相同选择器的事件处理程序。

为什么以上有趣（因为它提及.empty()）是.html() method does，当"string"用作参数时，它＆＃39;循环通过所有元素的选择器清理内部节点和数据（以防止内存泄漏）：

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

稍后在该循环内部，您可以看到如果使用innerHTML的值包含成功，则会设置：elem = 0 // the innerHTML was successful!! YEY

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

如果还有elem要匹配（innerHTML是错误的或要收到的错误），它的作用很简单：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.
    }
}

现在是时候看看d .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 3

是的，你的例子中两者之间存在差异。

<强> .remove();

如果要删除元素本身及其中的所有内容，请使用.remove（）。因此，在您的情况下，只从DOM中删除<div class="content"> <div>。它会变成：

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

<强> .html('');

用于设置元素的内容。在您的情况下，div内的所有.wrap都会被''替换。它会变成：

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

jQuery - 差异.remove（）vs .html（＆＃39;＆＃39;）

3 个答案: