javascript appendChild,innerHTML,join性能比较代码


Posted in Javascript onAugust 29, 2009
<!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>
Javascript 相关文章推荐
Ext 表单布局实例代码
Apr 30 Javascript
JavaScript自执行闭包的小例子
Jun 29 Javascript
Javascript中的String对象详谈
Mar 03 Javascript
JavaScript中如何通过arguments对象实现对象的重载
May 12 Javascript
javascript模拟post提交隐藏地址栏的参数
Sep 03 Javascript
JavaScript实现数字数组正序排列的方法
Apr 06 Javascript
noty ? jQuery通知插件全面解析
May 18 Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 Javascript
引用jquery框架后出错的解决方法
Aug 09 Javascript
老生常谈JavaScript中的this关键字
Oct 01 Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
JavaScript实时更新当前的时间的示例代码
Jul 15 Javascript
IE 条件注释详解总结(附实例代码)
Aug 29 #Javascript
基于jQuery的ajax功能实现web service的json转化
Aug 29 #Javascript
用户注册常用javascript代码
Aug 29 #Javascript
csdn 博客中实现运行代码功能实现
Aug 29 #Javascript
js 分栏效果实现代码
Aug 29 #Javascript
javascript 简练的几个函数
Aug 29 #Javascript
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
Aug 28 #Javascript
You might like
奉献出一个封装的curl函数 便于调用(抓数据专用)
2013/07/22 PHP
ThinkPHP的L方法使用简介
2014/06/18 PHP
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
thinkPHP引入类的方法详解
2016/12/08 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
jquery easyui如何实现格式化列
2017/07/30 jQuery
JS中注入eval, Function等系统函数截获动态代码
2019/04/03 Javascript
微信小程序实现搜索历史功能
2020/03/26 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
2019/07/22 Javascript
一篇文章看懂JavaScript中的回调
2021/01/05 Javascript
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
[04:26]2014DOTA2西雅图国际邀请赛 总决赛TOPPLAY
2014/07/22 DOTA
Python专用方法与迭代机制实例分析
2014/09/15 Python
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
Python实现批量将word转html并将html内容发布至网站的方法
2015/07/14 Python
使用FastCGI部署Python的Django应用的教程
2015/07/22 Python
Python网络爬虫出现乱码问题的解决方法
2017/01/05 Python
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
Python设计模式之外观模式实例详解
2019/01/17 Python
解决webdriver.Chrome()报错:Message:'chromedriver' executable needs to be in Path
2019/06/12 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
python matplotlib库绘制条形图练习题
2019/08/10 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
一帮一活动总结
2014/05/08 职场文书
元旦晚会活动总结
2014/07/09 职场文书
副校长个人对照检查材料思想汇报
2014/10/04 职场文书
婚礼答谢词
2015/01/04 职场文书
小学感恩主题班会
2015/08/12 职场文书
Python打包exe时各种异常处理方案总结
2021/05/18 Python