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 相关文章推荐
同一个表单 根据要求递交到不同页面的实现方法小结
Aug 05 Javascript
JavaScript prototype属性深入介绍
Nov 27 Javascript
jquery与prototype框架的详细对比
Nov 21 Javascript
js清空表单数据的两种方式(遍历+reset)
Jul 18 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
Oct 11 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
Jan 12 Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 Javascript
浅谈JavaScript 标准对象
Jun 02 Javascript
Jquery获取第一个子元素简单实例
Jun 02 Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
Dec 09 Javascript
vue实现购物车功能(商品分类)
Apr 20 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
计数器详细设计
2006/10/09 PHP
php 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
php导出word格式数据的代码实例
2013/11/25 PHP
PHP实现批量清空删除指定文件夹所有内容的方法
2017/05/30 PHP
php取出数组单个值的方法
2018/03/12 PHP
PHP DB 数据库连接类定义与用法示例
2019/03/11 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
XML+XSL 与 HTML 两种方案的结合
2007/04/22 Javascript
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
2010/11/05 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
Javascript拓展String方法小结
2013/07/08 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
Vue.js开发环境快速搭建教程
2017/03/17 Javascript
JavaScript之Map和Set_动力节点Java学院整理
2017/06/29 Javascript
Angular在模板驱动表单中自定义校验器的方法
2017/08/09 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
vue+axios 前端实现的常用拦截的代码示例
2018/08/23 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
vue.js循环radio的实例
2019/11/07 Javascript
python3 中文乱码与默认编码格式设定方法
2018/10/31 Python
在PyCharm中控制台输出日志分层级分颜色显示的方法
2019/07/11 Python
Python csv模块使用方法代码实例
2019/08/29 Python
Python进程间通信 multiProcessing Queue队列实现详解
2019/09/23 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
推荐WEB开发者最佳HTML5和CSS3代码生成器
2015/11/24 HTML / CSS
应届毕业生的自我鉴定
2013/11/13 职场文书
校园十佳歌手策划书
2014/01/22 职场文书
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
书法大赛策划方案
2014/06/04 职场文书
最感人的道歉情书
2015/05/12 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers