javascript appendChild,innerHTML,join性能比较代码
作者:bea
代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>appendChild,innerHTML,jo
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>appendChild,innerHTML,join</title>
<script type="text/javascript"><!--
//使用appendChild()方法添加span标签
function AppendDiv()
{
var times=parseInt(document.getElementById('tbTimes').value);
var oDiv=document.getElementById('div1');
var Text=document.getElementById('tbText').value;
var Time=new Date();
var StartTime=Time.getTime();
for(var i=1;i<times;i++)
{
var span=document.createElement('span');
span.appendChild(document.createTextNode(Text));
oDiv.appendChild(span);
}
var Time1=new Date();
var EndTime=Time1.getTime();
document.getElementById('TbDate').value=EndTime-StartTime
}
//使用innerhtml()方法添加span标签
function InnerHTML()
{
var times=parseInt(document.getElementById('tbTimes').value);
var oDiv=document.getElementById('div1');
var Text=document.getElementById('tbText').value;
var Time=new Date();
var StartTime=Time.getTime();
for(var i=1;i<times;i++)
{
oDiv.innerHTML+="<span>"+Text+"</span>";
}
var Time1=new Date();
var EndTime=Time1.getTime();
document.getElementById('TbDate').value=EndTime-StartTime
}
//使用 Array中push添加span
function Join()
{
var times=parseInt(document.getElementById('tbTimes').value);
var oDiv=document.getElementById('div1');
var Text=document.getElementById('tbText').value;
var Time=new Date();
var StartTime=Time.getTime();
var MyArray=new Array();
for(var i=1;i<times;i++)
{
MyArray.push("<span>"+Text+"</span>");
}
oDiv.innerHTML=MyArray.join(' ');
var Time1=new Date();
var EndTime=Time1.getTime();
document.getElementById('TbDate').value=EndTime-StartTime
}
// --></script>
</head>
<body>
<input type="text" id="tbText" value="ws_hgo " /><br />
<input type="text" id="tbTimes" value="1000" /><br />
<input type="text" id="TbDate" /><br />
<input id="Button1" type="button" value="Append" onclick="AppendDiv();" />
<input id="Button2" type="button" value="innerHTML" onclick="InnerHTML();" />
<input id="Button3" type="button" value="Join" onclick="Join();" />
<div id="div1">
</div>
</body>
</html>
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- 当文本框的值发生改变时,触发事件,在IE中有效
- javascript 触发事件列表 比较不错
- javascript concat数组累加 示例
- ie focus bug 解决方法
- javascript 24小时弹出一次的代码(利用cookies)
- 使用jQuery的ajax功能实现的RSS Reader 代码
- 一步一步教你写一个jQuery的插件教程(Plugin)
- 动态样式类封装JS代码
- JS URL传中文参数引发的乱码问题
- jquery 导航设计实现代码 学习jquery的朋友可以看下
- FF IE兼容性的修改小结
- js 获取浏览器高度和宽度值(多浏览器)
- 获取URL地址中的文件名和参数的javascript代码
- Javascript 判断函数类型完美解决方案
- javascript 控制 html元素 显示/隐藏实现代码
- jsTree树控件(基于jQuery, 超强悍)[推荐]
- JavaScript 继承详解 第一篇
- JavaScript 应用技巧集合[推荐]
- 用cssText批量修改样式