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 相关文章推荐
ASP Json Parser修正版
Dec 06 Javascript
Javascript下IE与Firefox下的差异兼容写法总结
Jun 18 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
Apr 22 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 Javascript
JavaScript严格模式详解
Jan 16 Javascript
jQuery Ajax实现跨域请求
Jan 21 Javascript
用原生JS实现简单的多选框功能
Jun 12 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 Javascript
jquery更改元素属性attr()方法操作示例
May 22 jQuery
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页面防重复提交方法总结
2013/11/25 PHP
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
php验证码生成代码
2015/11/11 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
2016/01/04 Javascript
js实现精确到秒的日期选择器完整实例
2016/04/30 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
微信小程序 地图map详解及简单实例
2017/01/10 Javascript
JS实现DIV高度自适应窗口示例
2017/02/16 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
AngularJS service之select下拉菜单效果
2017/07/28 Javascript
详解vue axios中文文档
2017/09/12 Javascript
JavaScript命令模式原理与用法实例详解
2020/03/10 Javascript
javascript 内存模型实例详解
2020/04/18 Javascript
vue 避免变量赋值后双向绑定的操作
2020/11/07 Javascript
Python numpy实现数组合并实例(vstack,hstack)
2018/01/09 Python
Python List cmp()知识点总结
2019/02/18 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
浅谈tensorflow 中tf.concat()的使用
2020/02/07 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
Python数组拼接np.concatenate实现过程
2020/04/18 Python
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
美国五金商店:Ace Hardware
2018/03/27 全球购物
有原因的手表:Flex Watches
2019/03/23 全球购物
中软国际Java程序员机试题
2012/08/19 面试题
职专应届生求职信
2013/11/16 职场文书
网上开店必备创业计划书
2014/01/26 职场文书
群众路线教育党课主持词
2014/04/01 职场文书
热爱祖国演讲稿
2014/05/04 职场文书
乡镇党的群众路线对照检查材料
2014/09/24 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers