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 04 Javascript
json中换行符的处理方法示例介绍
Jun 10 Javascript
JS回调函数的应用简单实例
Sep 17 Javascript
node.js中的fs.futimesSync方法使用说明
Dec 17 Javascript
详解Jquery实现ready和bind事件
Apr 14 Javascript
jQuery中$.grep() 过滤函数 数组过滤
Nov 22 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
Nov 05 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
Mar 20 Javascript
vue-cli中使用高德地图的方法示例
Mar 28 Javascript
JS实现时间校验的代码
May 25 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 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在字符串中查找指定字符串并删除的代码
2008/10/02 PHP
php设计模式  Command(命令模式)
2011/06/17 PHP
PHP采用get获取url汉字出现乱码的解决方法
2014/11/13 PHP
php文件缓存类汇总
2014/11/21 PHP
php生成验证码函数
2015/10/20 PHP
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
总结Javascript中数组各种去重的方法
2016/10/04 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
JS实现评价的星星功能
2017/08/20 Javascript
详解基于vue-router的动态权限控制实现方案
2017/09/28 Javascript
Node 自动化部署的方法
2017/10/17 Javascript
在vue中,v-for的索引index在html中的使用方法
2018/03/06 Javascript
vue模块拖拽实现示例代码
2019/03/09 Javascript
详解微信小程序回到顶部的两种方式
2019/05/09 Javascript
如何用原生js写一个弹窗消息提醒插件
2019/05/24 Javascript
vue实现日历备忘录功能
2020/09/24 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
vue实现五子棋游戏
2020/05/28 Javascript
vue项目中播放rtmp视频文件流的方法
2020/09/17 Javascript
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
python+pygame简单画板实现代码实例
2017/12/13 Python
在Python中实现shuffle给列表洗牌
2018/11/08 Python
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
Python异常处理知识点总结
2019/02/18 Python
django-allauth入门学习和使用详解
2019/07/03 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
css3.0新属性效果在ie下的解决方案
2010/05/10 HTML / CSS
HTML5 canvas基本绘图之绘制五角星
2016/06/27 HTML / CSS
中粮集团旗下食品网上购物网站:我买网
2016/09/22 全球购物
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
介绍一下.net和Java的特点和区别
2012/09/26 面试题
自我评价怎么写好呢?
2013/12/05 职场文书
领导干部培训感言
2014/01/23 职场文书
庆元旦广播稿
2014/02/10 职场文书