用createElement增加节点代替innerHTML
作者:hayden 日期:2008-07-09
在一般的制作中，需要通过行为层控制页面内容输出的话，都是选用JS的innerHTML方法，但是今天才发现，其实createElement方法在某些时候更优于innerHTML，他是通过向某节点内增加子节点的方式去将内容增加到网页的目标处。
这里，大概举一个关于createElement增加子节点的方法做例子：
程序代码
详情可以看下面的演示：
HTML代码
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
这里还需要提出一点，就是在Jscript执行效率上来看，createElement方法相对来说也要高一点。
最近在网上也看到了一篇文章，大概内容是实例说明其它效率高低，这里也将其中两例贴在这里以供大家比较比较了
createElement方法 增加100行内容
HTML代码
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
innerHTML 方法 增加100行内容
HTML代码
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
这里，大概举一个关于createElement增加子节点的方法做例子：
程序代码var $=new Function('obj','return document.getElementById(obj);');
function fnAppend(sstr){
var oNewNode = document.createElement("DIV");
$("mlist").appendChild(oNewNode);
oNewNode.innerHTML=sstr;
}
function fnAppend(sstr){
var oNewNode = document.createElement("DIV");
$("mlist").appendChild(oNewNode);
oNewNode.innerHTML=sstr;
}
详情可以看下面的演示：
HTML代码[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
这里还需要提出一点，就是在Jscript执行效率上来看，createElement方法相对来说也要高一点。
最近在网上也看到了一篇文章，大概内容是实例说明其它效率高低，这里也将其中两例贴在这里以供大家比较比较了
createElement方法 增加100行内容
HTML代码[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
innerHTML 方法 增加100行内容
HTML代码[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
评论: 4 | 引用: 0 | 查看次数: -
文章来自: 
引用通告: 
Tags: [2008-07-18 12:49 AM | 
]
hayden
]hayden至于何时应该用createElement较好、较不好，还是得依情况而定啦
如果要用createElement来建立table，那会死人的。。。
非常感谢你的提醒，呵呵，大意了一下~
要屏蔽了http: 自动连接，才能正常显示
发表评论