$().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=""
第一种方式虽然可读性较好,但显然不如第二种方法简洁。
理论上方式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
随机推荐
- js 实现单行文本滚动效果
js 代码如下: /***************滚动场次开始*****************/ function ScrollText(content, btnPrevious, btnNext, ...
- 对学长所谓“改变世界的游戏”《shield star》的运行感想-毛宇部分(完整版本请参考团队博客)
对于学长项目<shield star>的思考和看法: Ryan Mao ((毛宇) 110616-11061171 试用了一下学长黄杨等人开发的<shield star>游戏 ...
- HDU 4292 Food 最大流
Food Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
- Spring的profile属性
使用示例 //注解方式 public class DataSourceConfig { @Bean @Profile("prod") public DataSource dataS ...
- logback 配置详解【讲解较全的博客网站】
http://blog.csdn.net/haidage/article/category/812478 详解(一)http://blog.csdn.net/haidage/article/detai ...
- netstat -an 提示:不是内部或外部命令
输入cmd,点击确定按钮: 进入dos操作界面效果: 然后输入netstat -an 然后回车,查看端口: 5 如果输入:netstat -an,提示:不是内部或外部命令,也不是可运行的程 ...
- 设置完在Canvas的位置后,控件HitTest不响应的问题
have a Canvas with a couple of elements on it like Line, Path and Text Box. In the MouseOver event o ...
- TYVJ P1093 验证数独 Label:none
背景 XX学校风靡一款智力游戏,也就是数独(九宫格),先给你一个数独,并需要你验证是否符合规则. 描述 具体规则如下:每一行都用到1,2,3,4,5,6,7,8,9,位置不限,每一列都用到1,2,3, ...
- JQuery获取和设置Select选项常用方法总结 (转)
1.获取select 选中的 text: $("#cusChildTypeId").find("option:selected").text(); $(&quo ...
- FLTK 1.3.3 MinGW 4.9.1 Configuration 配置
Download FLTK 1.3.3 Download CMake 3.2.0 Start CMake 3.2.0, fill the source and destination: source: ...