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 相关文章推荐
js 屏蔽鼠标右键脚本附破解方法
Dec 03 Javascript
用js实现in_array的方法
Nov 05 Javascript
SuperSlide2实现图片滚动特效
Jun 20 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
JavaScript中的数值范围介绍
Dec 29 Javascript
谈谈JavaScript的New关键字
Aug 26 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
Dec 08 Javascript
angular2系列之路由转场动画的示例代码
Nov 09 Javascript
代码详解Vuejs响应式原理
Dec 20 Javascript
详解小程序云开发数据库
May 20 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
Oct 24 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
Dec 24 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调用Java对象的方法
2006/10/09 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
浅析THINKPHP的addAll支持的最大数据量
2015/02/03 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
javascript Xml增删改查(IE下)操作实现代码
2009/01/30 Javascript
javascript动态改变img的src属性图片不显示的解决方法
2010/10/20 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
javascript实现简单的Map示例介绍
2013/12/23 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
2017/03/09 Javascript
NodeJs的fs读写删除移动监听
2017/04/28 NodeJs
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
angularjs模态框的使用代码实例
2019/12/20 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
js实现表格数据搜索
2020/08/09 Javascript
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
基于Python实现的ID3决策树功能示例
2018/01/02 Python
Python实现翻转数组功能示例
2018/01/12 Python
Python线程创建和终止实例代码
2018/01/20 Python
Python错误处理操作示例
2018/07/18 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
numpy库ndarray多维数组的维度变换方法(reshape、resize、swapaxes、flatten)
2020/04/28 Python
python sleep和wait对比总结
2021/02/03 Python
美国知名的网上鞋类及相关服装零售商:Shoes.com
2017/05/06 全球购物
中东奢侈品市场:Coveti
2019/05/12 全球购物
西班牙在线药店:DosFarma
2020/03/28 全球购物
中文教师求职信
2014/02/22 职场文书
一分钟演讲稿
2014/04/30 职场文书
大学优秀班集体申报材料
2014/05/23 职场文书
农村党员对照检查材料
2014/09/24 职场文书
MySQL中datetime时间字段的四舍五入操作
2021/10/05 MySQL