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 相关文章推荐
Jquery实现视频播放页面的关灯开灯效果
May 27 Javascript
Javascript全局变量var与不var的区别深入解析
Dec 09 Javascript
jQuery功能函数详解
Feb 01 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
Nov 25 Javascript
基于jQuery的select下拉框选择触发事件实例分析
Nov 18 Javascript
js实现小窗口拖拽效果
Dec 03 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
jquery中each循环的简单回滚操作
May 05 jQuery
基于Datatables跳转到指定页的简单实例
Nov 09 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 Javascript
js实现计时器秒表功能
Dec 16 Javascript
Vue解析剪切板图片并实现发送功能
Feb 04 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
PHP+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
2012/07/15 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
js正确获取元素样式详解
2009/08/07 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
2012/02/27 Javascript
Underscore.js常用方法总结
2015/02/28 Javascript
js点击文本框后才加载验证码实例代码
2015/10/20 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
2016/04/26 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
2016/12/14 Javascript
利用10行js代码实现上下滚动公告效果
2017/12/08 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
微信小程序入门之绘制时钟
2020/10/22 Javascript
[00:36]DOTA2上海特级锦标赛 LGD战队宣传片
2016/03/04 DOTA
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
在Python中操作时间之strptime()方法的使用
2020/12/30 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
在Python中调用Ping命令,批量IP的方法
2019/01/26 Python
Ubuntu下Anaconda和Pycharm配置方法详解
2019/06/14 Python
PyQtGraph在pyqt中的应用及安装过程
2019/08/04 Python
Django发送邮件和itsdangerous模块的配合使用解析
2019/08/10 Python
基于Python绘制个人足迹地图
2020/06/01 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
Python urllib库如何添加headers过程解析
2020/10/05 Python
python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解
2021/01/26 Python
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
AP澳洲中文网:澳洲正品直邮,包税收件无忧
2019/07/12 全球购物
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
大专毕业生自我评价分享
2013/11/10 职场文书
安全生产先进个人材料
2014/02/06 职场文书
4S店客服专员岗位职责
2015/04/07 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
素质教育培训心得体会
2016/01/19 职场文书
浅析python中特殊文件和特殊函数
2022/02/24 Python