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编程起步(第五课)
Jan 10 Javascript
可实现多表单提交的javascript函数
Aug 01 Javascript
JavaScript对象模型-执行模型
Apr 28 Javascript
javascript css styleFloat和cssFloat
Mar 15 Javascript
script标签的 charset 属性使用说明
Dec 04 Javascript
js控制不同的时间段显示不同的css样式的实例代码
Nov 04 Javascript
Javascript中apply、call、bind的巧妙使用
Aug 18 Javascript
折叠菜单及选择器的运用
Feb 03 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 Javascript
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
js中json对象和字符串的理解及相互转化操作实现方法
Sep 22 Javascript
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
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数据饼图效果实现代码
2011/11/23 PHP
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
php字符编码转换之gb2312转为utf8
2013/10/28 PHP
PHP内置函数生成随机数实例
2019/01/18 PHP
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
JsDom 编程小结
2011/08/09 Javascript
JS中showModalDialog 的使用解析
2013/04/17 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
HTML5 js实现拖拉上传文件功能
2020/11/20 Javascript
webpack项目调试以及独立打包配置文件的方法
2018/02/28 Javascript
p5.js入门教程之鼠标交互的示例
2018/03/16 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
2019/02/13 Javascript
微信小程序仿今日头条导航栏滚动解析
2019/08/20 Javascript
vue解决使用$http获取数据时报错的问题
2019/10/30 Javascript
如何通过vscode运行调试javascript代码
2020/07/24 Javascript
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
Python实现的字典值比较功能示例
2018/01/08 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
python抓取需要扫微信登陆页面
2019/04/29 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
利用python实现汉字转拼音的2种方法
2019/08/12 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
Python 远程开关机的方法
2020/11/18 Python
Python3.9.1中使用split()的处理方法(推荐)
2021/02/07 Python
HTML5 Canvas绘制圆点虚线实例
2015/01/01 HTML / CSS
美味咖啡的顶级烘焙师:Cafe Britt
2018/03/15 全球购物
教师的实习自我鉴定
2013/12/17 职场文书
孝老爱亲模范事迹材料
2014/05/25 职场文书
关于美容院的活动方案
2014/08/14 职场文书
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
苏州园林导游词
2015/02/03 职场文书
员工开除通知书
2015/04/25 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers
浅谈spring boot使用thymeleaf版本的问题
2021/08/04 Java/Android