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 相关文章推荐
一些常用的JS功能函数代码
Jun 23 Javascript
学习ExtJS fit布局使用说明
Oct 08 Javascript
JQuery学习笔录 简单的JQuery
Apr 09 Javascript
javascript full screen 全屏显示页面元素的方法
Sep 27 Javascript
JavaScript 事件入门知识
Apr 13 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 Javascript
Angular2 自定义表单验证器的实现方法
Dec 14 Javascript
实例讲解v-if和v-show的区别
Jan 31 Javascript
通过cordova将vue项目打包为webapp的方法
Feb 02 Javascript
vue实现微信二次分享以及自定义分享的示例
Mar 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
建立动态的WML站点(一)
2006/10/09 PHP
解析PHP汉字转换拼音的类
2013/06/18 PHP
PHP file_get_contents设置超时处理方法
2013/09/30 PHP
PHP数据过滤的方法
2013/10/30 PHP
PHP生成指定随机字符串的简单实现方法
2015/04/01 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
php求今天、昨天、明天时间戳的简单实现方法
2016/07/28 PHP
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
PHP实现在对象之外访问其私有属性private及保护属性protected的方法
2017/11/20 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2013/11/25 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
js函数内变量的作用域分析
2015/01/12 Javascript
JavaScript实现的双向跨域插件分享
2015/01/31 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
JS实现漂亮的时间选择框效果
2016/08/20 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
2017/01/19 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
three.js搭建室内场景教程
2018/12/30 Javascript
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
如何使用原生Js实现随机点名详解
2021/01/06 Javascript
[17:13]DOTA2 HEROS教学视频教你分分钟做大人-斯拉克
2014/06/13 DOTA
[01:38]完美世界DOTA2联赛PWL S3 集锦第四期
2020/12/21 DOTA
Python中使用logging模块打印log日志详解
2015/04/05 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
python读取ini配置文件过程示范
2019/12/23 Python
tensorflow使用CNN分析mnist手写体数字数据集
2020/06/17 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
学生个人自我鉴定范文
2014/03/28 职场文书
元旦寄语大全
2014/04/10 职场文书
个人租房协议书样本
2014/10/01 职场文书
Java8中Stream的一些神操作
2021/11/02 Java/Android