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 相关文章推荐
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
Jul 31 Javascript
javascript题目,重写函数让其无限相加
Feb 15 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
Nov 25 Javascript
JS实现静止元素自动移动示例
Apr 14 Javascript
聊一聊JS中this的指向问题
Jun 17 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
Nov 17 Javascript
10个经典的网页鼠标特效代码
Jan 09 Javascript
微信小程序制作扭蛋机代码实例
Sep 24 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 Javascript
vue中实现图片压缩 file文件的方法
May 28 Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 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/12/21 PHP
php学习笔记(三)操作符与控制结构
2011/08/06 PHP
php表单敏感字符过滤类
2014/12/08 PHP
php简单图像创建入门实例
2015/06/10 PHP
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
Thinkphp和onethink实现微信支付插件
2016/04/13 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
js获取GridView中行数据的两种方法 分享
2013/07/13 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
nodejs下打包模块archiver详解
2014/12/03 NodeJs
使用nodejs开发cli项目实例
2015/06/03 NodeJs
JS图片定时翻滚效果实现方法
2016/06/21 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
使用jQuery实现购物车结算功能
2017/08/15 jQuery
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
2020/09/04 Javascript
js实现日历
2020/11/07 Javascript
30分钟搭建Python的Flask框架并在上面编写第一个应用
2015/03/30 Python
Python中多个数组行合并及列合并的方法总结
2018/04/12 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
纯css3使用vw和vh实现自适应的方法
2018/02/09 HTML / CSS
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
C有"按引用传递"吗
2016/09/06 面试题
出纳岗位职责
2013/11/09 职场文书
2015年小学总务工作总结
2015/07/21 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书
高中语文教学反思范文
2016/02/16 职场文书
springboot+VUE实现登录注册
2021/05/27 Vue.js