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 相关文章推荐
限制复选框的最大可选数
Jul 01 Javascript
使用jQuery模板来展现json数据的代码
Oct 22 Javascript
js验证是否为数字的总结
Apr 14 Javascript
JS获取DropDownList的value值与text值的示例代码
Jan 07 Javascript
javascript数据结构与算法之检索算法
Apr 04 Javascript
js获取当前周、上一周、下一周日期
Mar 19 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
Apr 20 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 Javascript
vue+element实现批量删除功能的示例
Feb 28 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
JS随机密码生成算法
Sep 23 Javascript
vue设置动态请求地址的例子
Nov 01 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
打造计数器DIY三步曲(上)
2006/10/09 PHP
使用Apache的htaccess防止图片被盗链的解决方法
2013/04/27 PHP
PHP中time(),date(),mktime()区别介绍
2013/09/28 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
php实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
PHP上传Excel文件导入数据到MySQL数据库示例
2016/10/25 PHP
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
移动设备web开发首选框架:zeptojs介绍
2015/01/29 Javascript
javascript瀑布流式图片懒加载实例解析与优化
2016/02/23 Javascript
第二篇Bootstrap起步
2016/06/21 Javascript
js轮播图代码分享
2016/07/14 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
Nodejs中Express 常用中间件 body-parser 实现解析
2017/05/22 NodeJs
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
python Web开发你要理解的WSGI &amp; uwsgi详解
2018/08/01 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
Python3如何判断三角形的类型
2020/04/12 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
英国健身超市:Fitness Superstore
2019/06/17 全球购物
汽车检测与维修个人求职信
2013/09/24 职场文书
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
日语专业推荐信
2013/11/12 职场文书
经销商培训邀请函
2014/01/21 职场文书
颁奖典礼主持词
2014/03/25 职场文书
党校党性分析材料
2014/12/19 职场文书
停课通知书
2015/04/24 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android