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 相关文章推荐
JQuery入门—JQuery程序的代码风格详细介绍
Jan 03 Javascript
使用js操作cookie的一点小收获分享
Sep 03 Javascript
jQuery之Deferred对象详解
Sep 04 Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 Javascript
echarts3 使用总结(绘制各种图表,地图)
Jan 05 Javascript
JavaScript正则表达式和级联效果
Sep 14 Javascript
详解使用React进行组件库开发
Feb 06 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
Mar 30 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
javascript导出csv文件(excel)的方法示例
Aug 25 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 23 Javascript
vue 通过base64实现图片下载功能
Dec 19 Vue.js
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
JS 网站性能优化笔记
2011/05/24 PHP
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
PHP 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
2016/01/04 PHP
php微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
Nigma vs Alliance BO5 第三场2.14
2021/03/10 DOTA
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
jQuery实现用户注册的表单验证示例
2013/08/28 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
JavaScript纯色二维码变成彩色二维码
2020/07/23 Javascript
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
HTML5开发Kinect体感游戏的实例应用
2017/09/18 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
2018/11/02 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
2019/09/03 Javascript
vue+axios实现post文件下载
2019/09/25 Javascript
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
[01:38:19]夜魇凡尔赛茶话会 第五期
2021/03/11 DOTA
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
python的re模块应用实例
2014/09/26 Python
对python实现合并两个排序链表的方法详解
2019/01/23 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
戴森英国官网:Dyson英国
2019/05/07 全球购物
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
意大利网上书店:LaFeltrinelli
2020/06/12 全球购物
《夸父追日》教学反思
2014/02/26 职场文书
2014年师德承诺书
2014/05/23 职场文书
基层党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
入党积极分子培养联系人意见
2015/08/12 职场文书
七年级之开学家长寄语35句
2019/09/05 职场文书
MySQL面试题讲解之如何设置Hash索引
2021/11/01 MySQL
讲解Python实例练习逆序输出字符串
2022/05/06 Python