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的输入框在光标位置插入内容, 并选中
Oct 29 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
Aug 14 Javascript
js中将String转换为number以便比较
Jul 08 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
Apr 06 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
javascript每日必学之封装
Feb 23 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
jQuery EasyUI封装简化操作
Sep 18 Javascript
js实现用户输入的小写字母自动转大写字母的方法
Jan 21 Javascript
vue组件学习教程
Sep 09 Javascript
vue配置请求本地json数据的方法
Apr 11 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
Can't create/write to file 'C:\WINDOWS\TEMP\...MYSQL报错解决方法
2011/06/30 PHP
php微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
PHP使用SWOOLE扩展实现定时同步 MySQL 数据
2017/04/09 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
防止浏览器记住用户名及密码的简单实用方法
2013/04/22 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
javascript实现回车键提交表单方法总结
2015/01/10 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
详解vue-admin和后端(flask)分离结合的例子
2018/02/12 Javascript
vue动态删除从数据库倒入列表的某一条方法
2018/09/29 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
Vue实现计算器计算效果
2020/08/17 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
[03:08]迎霜节狂欢!2018年迎霜节珍藏Ⅰ一览
2018/12/25 DOTA
浅析Python中的for 循环
2016/06/09 Python
python中matplotlib的颜色及线条控制的示例
2018/03/16 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
Python Subprocess模块原理及实例
2019/08/26 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
Python 如何测试文件是否存在
2020/07/31 Python
Django配置跨域并开发测试接口
2020/11/04 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
DOUGLAS波兰:在线销售香水和化妆品
2020/07/05 全球购物
总经理助理的八要求
2013/11/12 职场文书
2015年护士节慰问信
2015/03/23 职场文书
机器人总动员观后感
2015/06/09 职场文书
go语言-在mac下brew升级golang
2021/04/25 Golang
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记