$().html(value) vs $().empty().append(value)-白红宇

$().html(value) vs $().empty().append(value)

阅读量：5021 次

发布时间：2019-06-12

本文共 3072 字，大约阅读时间需要 10 分钟。

当需要清空某个dom结点内容时，我所知道的有两种方法：

1.Element.removeChild(child)

// Removing all children from an element  var element = document.getElementById("test");  while (element.firstChild) {
         element.removeChild(element.firstChild);  }

2.Element.innerHTML=""

第一种方式虽然可读性较好，但显然不如第二种方法简洁。

理论上方式2会比方式1快很多，从代码上来分析也是如此，至少方式二不用做while循环，也不用判断属性。事实上也的确如此，但只限于子结点较少的情况下。

在子结点个数多过的情况下，方式1是优于方式2的。性能测试之　　　

jquery提供了两个类似的接口与之相对应:

1.$().empty()

2.$().html('')

所以，替换dom内容也同样有两种方式:

1.$().empty().append(HTMLString|HTMLElement|jQueryElement)

2.$().html(HTMLString)

jQuery 1.9.1 empty方法实现如下，与方式1相似

empty: function() {
         var elem,        i = 0;    for ( ; (elem = this[i]) != null; i++ ) {
             // Remove element nodes and prevent memory leaks        if ( elem.nodeType === 1 ) {
                 jQuery.cleanData( getAll( elem, false ) );        }        // Remove any remaining nodes        while ( elem.firstChild ) {
                 elem.removeChild( elem.firstChild );        }        // If this is a select, ensure that it displays empty (#12336)        // Support: IE<9        if ( elem.options && jQuery.nodeName( elem, "select" ) ) {
                 elem.options.length = 0;        }    }    return this;}

jQuery 1.9.1 html方法的实现:

html: function( value ) {
             return jQuery.access( this, function( value ) {
                 var elem = this[0] || {},                i = 0,                l = this.length;            if ( value === undefined ) {
                     return elem.nodeType === 1 ?                    elem.innerHTML.replace( rinlinejQuery, "" ) :                    undefined;            }            // See if we can take a shortcut and just use innerHTML            if ( typeof value === "string" && !rnoInnerhtml.test( value ) &&                ( jQuery.support.htmlSerialize || !rnoshimcache.test( value )  ) &&                ( jQuery.support.leadingWhitespace || !rleadingWhitespace.test( value ) ) &&                !wrapMap[ ( rtagName.exec( value ) || ["", ""] )[1].toLowerCase() ] ) {
                     value = value.replace( rxhtmlTag, "<$1>
     " );                try {
                         for (; i < l; i++ ) {
                             // Remove element nodes and prevent memory leaks                        elem = this[i] || {};                        if ( elem.nodeType === 1 ) {
                                 jQuery.cleanData( getAll( elem, false ) );                            elem.innerHTML = value;                        }                    }                    elem = 0;                // If using innerHTML throws an exception, use the fallback method                } catch(e) {}            }            if ( elem ) {
                     this.empty().append( value );            }        }, null, value, arguments.length );    },

可以看到，当传入的参数不为html字符串时，会执行这样的语句:

if ( elem ) {
         this.empty().append( value );}

不言而喻，当传入的参数不为html字符串或html字符串较长时，$().empty().append(value)的性能会优于$().html(value),性能测试之;

同时，基于代码可读性也建议优先使用$().empty().append(value)

refs :

转载于:https://www.cnblogs.com/flowerszhong/p/3543384.html

你可能感兴趣的文章

Excel催化剂开源第42波-与金融大数据TuShare对接实现零门槛零代码获取数据