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中的undefined,null,&quot;&quot;,0和false
Mar 08 Javascript
ext实现完整的登录代码
Aug 08 Javascript
namespace.js Javascript的命名空间库
Oct 11 Javascript
js 限制数字 js限制输入实现代码
Dec 04 Javascript
验证控件与Button的OnClientClick事件详细解析
Dec 04 Javascript
js调用iframe实现打印页面内容的方法
Mar 04 Javascript
JavaScript中join()方法的使用简介
Jun 09 Javascript
ES6下React组件的写法示例代码
May 04 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
May 07 Javascript
JavaScript+HTML5实现的日期比较功能示例
Jul 12 Javascript
layui框架与SSM前后台交互的方法
Sep 12 Javascript
mustache.js实现首页元件动态渲染的示例代码
Dec 28 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获取淘宝分类id示例
2014/01/16 PHP
PHP提示Warning:phpinfo() has been disabled函数禁用的解决方法
2014/12/17 PHP
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
2011/08/28 Javascript
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
2014/05/13 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
javascript中动态函数用法实例分析
2015/05/14 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
Bootstrap编写导航栏和登陆框
2016/05/30 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
[02:51]DOTA2英雄基础教程 风暴之灵
2013/12/23 DOTA
[01:09:24]Ti4开幕式
2014/07/19 DOTA
Python创建系统目录的方法
2015/03/11 Python
Python3读取文件常用方法实例分析
2015/05/22 Python
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
2017/12/25 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
Django 允许局域网中的机器访问你的主机操作
2020/05/13 Python
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
师范生自我鉴定范文
2013/10/05 职场文书
工程造价与管理专业应届生求职信
2013/11/23 职场文书
作弊检讨书1000字
2014/02/01 职场文书
婚礼秀策划方案
2014/05/19 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
入党现实表现材料
2014/12/23 职场文书
2015年乡镇信访工作总结
2015/04/07 职场文书
用电申请报告范文
2015/05/18 职场文书
导游词之井冈山
2019/11/20 职场文书