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 相关文章推荐
OfflineSave离线保存代码再次发布使用说明
May 23 Javascript
javascript几个易错点记录
Nov 26 Javascript
JavaScript汉诺塔问题解决方法
Apr 21 Javascript
js性能优化技巧
Nov 29 Javascript
js 作用域和变量详解
Feb 16 Javascript
基于es6三点运算符的使用方法(实例讲解)
Oct 12 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 Javascript
Vue编程式跳转的实例代码详解
Jul 10 Javascript
java和js实现的洗牌小程序
Sep 30 Javascript
vue-socket.io跨域问题有效解决方法
Feb 11 Javascript
vue中template的三种写法示例
Oct 21 Javascript
AngularJS实现多级下拉框
Mar 25 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读取RSS feed的代码
2008/08/01 PHP
PHP容易被忽略而出错陷阱 数字与字符串比较
2011/11/10 PHP
PHP判断一个gif图片是否为动态图片的方法
2014/11/19 PHP
php限制上传文件类型并保存上传文件的方法
2015/03/13 PHP
php跨服务器访问方法小结
2015/05/12 PHP
PHP设计模式(三)建造者模式Builder实例详解【创建型】
2020/05/02 PHP
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
非常漂亮的相册集 使用jquery制作相册集
2016/04/28 Javascript
setTimeout学习小结
2017/02/08 Javascript
vue-axios使用详解
2017/05/10 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
vue-cli axios请求方式及跨域处理问题
2018/03/28 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
2019/05/10 jQuery
如何使用vue slot创建一个模态框的实例代码
2020/05/24 Javascript
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
详解Python中的日志模块logging
2015/06/19 Python
python调用fortran模块
2016/04/08 Python
python中range()与xrange()用法分析
2016/09/21 Python
利用Python2下载单张图片与爬取网页图片实例代码
2017/12/25 Python
Python cookbook(数据结构与算法)通过公共键对字典列表排序算法示例
2018/03/15 Python
python3.x实现发送邮件功能
2018/05/22 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
Python使用Selenium实现淘宝抢单的流程分析
2020/06/23 Python
JSF面试题:Jsf中的核心类用那些?有什么作用?LiftCycle六大生命周期是什么?
2014/07/17 面试题
一年级家长会邀请函
2014/01/25 职场文书
绩效考核实施方案
2014/03/18 职场文书
学校献爱心活动总结
2014/07/08 职场文书
日语系毕业求职信
2014/07/27 职场文书
水利专业大学生职业生涯规划书范文
2014/09/17 职场文书
MySQL 分页查询的优化技巧
2021/05/12 MySQL
SpringCloud Function SpEL注入漏洞分析及环境搭建
2022/04/08 Java/Android
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python