开发者社区> flowerszhong> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: 当需要清空某个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="" 第一种方式虽然可读性较好,但显然不如第二种方法简洁。
+关注继续查看

当需要清空某个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的。性能测试之killing a lots of kids   

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></$2>" );

                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),性能测试之jquery html vs empty append;
同时,基于代码可读性也建议优先使用$().empty().append(value)

refs :
jquery-html-vs-empty-append
kill-lots-kids
deleting-child-nodes-of-a-div-node
Element.innerHTML

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Webpack轻松入门(四)——HTML打包
到目前为止,有关Webpack最基础的内容差不多已经讲完了,其中包括Webpack运行的基本流程、CSS的打包和图片的打包,也就是说,当你掌握这几节之后,基本上就能像以前不用Webpack时一样愉快地写代码了。
1257 0
APPEND key value
如果 key 已经存在,并且值为字符串,那么这个命令会把 value 追加到原来值(value)的结尾。 如果 key 不存在,那么它将首先创建一个空字符串的key,再执行追加操作,这种情况 APPEND 将类似于 SET 操作。
1037 0
《HTML 5+CSS 3入门经典》——1.1 HTML的历史
本节书摘来自华章计算机《HTML 5+CSS 3入门经典》一书中的第1章,第1.1节,作者:管媛辉 潘凯华著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1122 0
《HTML 5+CSS 3入门经典》——2.6 习题
本节书摘来自华章计算机《HTML 5+CSS 3入门经典》一书中的第2章,第2.6节,作者:管媛辉 潘凯华著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
921 0
Simple iPhone Keychain Access
Simple iPhone Keychain Access Mar 29th, 2010 9:14 pm The keychain is about the only place that an iPhone application ...
1707 0
App纳入监管,HTML5将大行其道?
App纳入监管,HTML5将大行其道? 先引用某条新闻 日前,有消息称国家网信办近日将出台APP应用程序发展管理办法。中央网信办主任鲁炜在推进网络空间法治化座谈会上透露,我国将加强互联网立法,依靠严密的法律网来打造规范的互联网。
1005 0
+关注
flowerszhong
编程语言相关技术专家
149
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载