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 相关文章推荐
Jquery选择器 $实现原理
Dec 02 Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 Javascript
javascript实现字符串反转的方法
Feb 05 Javascript
浅谈JavaScript数据类型及转换
Feb 28 Javascript
JavaScript中匿名函数用法实例
Mar 23 Javascript
JavaScript知识点整理
Dec 09 Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 Javascript
BootStrap 可编辑表Table格
Nov 24 Javascript
JS自定义滚动条效果简单实现代码
Oct 27 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 Javascript
layer iframe 设置关闭按钮的方法
Sep 12 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
May 09 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中可能用来加密字符串的函数[base64_encode、urlencode、sha1]
2012/01/16 PHP
浅析php中常量,变量的作用域和生存周期
2013/08/10 PHP
laravel实现登录时监听事件,添加登录用户的记录方法
2019/09/30 PHP
javascript字典探测用户名工具
2006/10/05 Javascript
javascript+iframe 实现无刷新载入整页的代码
2010/03/17 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
2014/06/20 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
requirejs按需加载angularjs文件实例
2017/06/08 Javascript
JavaScript高阶函数_动力节点Java学院整理
2017/06/28 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
2018/06/19 Javascript
详解webpack4.x之搭建前端开发环境
2019/03/28 Javascript
ES6知识点整理之Proxy的应用实例详解
2019/04/16 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
2020/02/15 Javascript
Python计算三角函数之asin()方法的使用
2015/05/15 Python
在Django的视图中使用form对象的方法
2015/07/18 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
python pandas中对Series数据进行轴向连接的实例
2018/06/08 Python
python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码
2019/07/31 Python
Python实现直方图均衡基本原理解析
2019/08/08 Python
pytorch 求网络模型参数实例
2019/12/30 Python
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
Clarisonic美国官网:科莱丽声波洁面仪
2017/10/12 全球购物
俄罗斯韩国化妆品网上商店:Cosmasi.ru
2019/10/31 全球购物
舞蹈教师自荐信
2014/01/27 职场文书
班级入场式解说词
2014/02/01 职场文书
六一儿童节新闻稿
2015/07/17 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
2016年党员干部廉政承诺书
2016/03/24 职场文书
Redis实现订单自动过期功能的示例代码
2021/05/08 Redis
详解JavaScript中Arguments对象用途
2021/08/30 Javascript