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 图片缩放(按比例)控制代码
May 27 Javascript
js遍历、动态的添加数据的小例子
Jun 22 Javascript
利用浏览器全屏api实现js全屏
Jan 16 Javascript
js和jquery使按钮失效为不可用状态的方法
Jan 26 Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
Apr 24 Javascript
Vue中的Vux配置指南
Dec 08 Javascript
angularjs 获取默认选中的单选按钮的value方法
Feb 28 Javascript
在vue项目中引入高德地图及其UI组件的方法
Sep 04 Javascript
vue 获取及修改store.js里的公共变量实例
Nov 06 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的特殊设置
2006/10/09 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
laravel5表单唯一验证的实例代码
2019/09/30 PHP
js返回上一页并刷新代码整理
2012/12/21 Javascript
jQuery父级以及同级元素查找介绍
2013/09/04 Javascript
javascript计算星座属相(十二生肖属相)示例代码
2014/01/09 Javascript
JS获取地址栏参数的几种方法小结
2014/02/28 Javascript
js自定义鼠标右键的实现原理及源码
2014/06/23 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
2016/03/01 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
2017/11/22 Javascript
微信小程序动画(Animation)的实现及执行步骤
2018/10/28 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
基于openlayers实现角度测量功能
2020/09/28 Javascript
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
Python基础教程之浅拷贝和深拷贝实例详解
2017/07/15 Python
Pandas 同元素多列去重的实例
2018/07/03 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
pytorch实现线性拟合方式
2020/01/15 Python
python代码如何实现余弦相似性计算
2020/02/09 Python
Python版中国省市经纬度
2020/02/11 Python
倩碧美国官网:Clinique美国
2016/07/20 全球购物
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
美国婴儿用品店:Babies”R”Us
2017/10/12 全球购物
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
什么是"引用"?申明和使用"引用"要注意哪些问题?
2016/03/03 面试题
医药专业推荐信
2013/11/15 职场文书
优秀员工评优方案
2014/06/13 职场文书
青年志愿者活动方案
2014/08/17 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android
java实现web实时消息推送的七种方案
2022/07/23 Java/Android