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 相关文章推荐
关于javascript event flow 的一个bug详解
Sep 17 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
Mar 04 Javascript
json+jQuery实现的无限级树形菜单效果代码
Aug 27 Javascript
jQuery绑定事件-多种实现方式总结
May 09 Javascript
jQuery插件pagination实现无刷新分页
May 21 Javascript
JS正则表达式判断有效数实例代码
Mar 13 Javascript
Vuex之理解Mutations的用法实例
Apr 19 Javascript
JavaScript实现移动端轮播效果
Jun 06 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
Jun 07 Javascript
Vue+Express实现登录注销功能的实例代码
May 05 Javascript
JS数组方法concat()用法实例分析
Jan 18 Javascript
在react中使用vue的状态管理的方法示例
May 02 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代码质量36计
2012/09/05 PHP
浅析php静态方法与非静态方法的用法区别
2016/05/17 PHP
PHP实现浏览器中直接输出图片的方法示例
2018/03/14 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
AutoSave/自动存储功能实现
2007/03/24 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
解决IE6的PNG透明JS插件使用介绍
2013/04/17 Javascript
js判断上传文件的类型和大小示例代码
2013/10/18 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
2015/08/31 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
原生js实现数字字母混合验证码的简单实例
2015/12/10 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
2016/05/10 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
用jQuery向div中添加Html文本内容的简单实现
2016/07/13 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
Ajax和Comet技术总结
2017/02/19 Javascript
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
2017/07/20 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
[01:39](回顾)各路豪强针锋相对,几经鏖战四强产生
2014/07/01 DOTA
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
python实现发送和获取手机短信验证码
2016/01/15 Python
selenium+python 去除启动的黑色cmd窗口方法
2018/05/22 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
Python各种扩展名区别点整理
2020/02/27 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
辞旧迎新演讲稿
2014/09/15 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
技术入股合作协议书
2016/03/21 职场文书
python 爬取吉首大学网站成绩单
2021/06/02 Python
台式电脑蓝牙适配器怎么安装?台式电脑蓝牙适配器安装教程
2022/04/08 数码科技