用createElement增加节点代替innerHTML

在一般的制作中,需要通过行为层控制页面内容输出的话,都是选用JS的innerHTML方法,但是今天才发现,其实createElement方法在某些时候更优于innerHTML,他是通过向某节点内增加子节点的方式去将内容增加到网页的目标处。

这里,大概举一个关于createElement增加子节点的方法做例子:

var $=new Function('obj','return document.getElementById(obj);');
function fnAppend(sstr){
    var oNewNode = document.createElement("DIV");
    $("mlist").appendChild(oNewNode);
    oNewNode.innerHTML=sstr;
}

详情可以看下面的演示:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




New Document












这里还需要提出一点,就是在Jscript执行效率上来看,createElement方法相对来说也要高一点。
最近在网上也看到了一篇文章,大概内容是实例说明其它效率高低,这里也将其中两例贴在这里以供大家比较比较了

createElement方法 增加100行内容

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> New Document



innerHTML 方法 增加100行内容

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> New Document



本文固定链接:成事博客用createElement增加节点代替innerHTML
喜欢 (0)分享 (0)
发表我的评论
取消评论

表情     2 + 9 = ? (必填)

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址