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>

对比:

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

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

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

为什么 .remove() 有它的优点 这里有解释:http://api.jquery.com/remove/

Similar to .empty(), the .remove() method takes elements out of the DOM. Use .remove() when you want to remove the element itself, as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed. To remove the elements without removing data and events, use .detach() instead

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

为什么上面的内容很有趣(因为它提到了 .empty())是什么 .html() method does ，当 “string” 用作参数时，它会循环遍历所有元素的选择器，清理内部节点和数据(以防止内存泄漏):

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

稍后在该循环内您可以看到，如果使用 innerHTML 的值包含成功，它会设置:elem = 0//innerHTML 成功!!是的

是的，它使用 elem.innerHTML 来分配传递的参数值(如果可能)。

如果仍然有一个 elem 可以匹配(innerHTML 是错误的或有待捕获的错误)，它所做的只是:this.empty()。追加(值(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...)
}