javascript将数字正射影像图节点添加到文档的方法实例分析

本文实例讲述了爪哇岛描述语言将数字正射影像图节点添加到文档的方法。分享给大家供大家参考。具体如下：

这里对两种方法进行了比较：第一种：先创建所有节点，再添加到文档方式的运行时长；第二种：先向文档添加一个空容器，然后每创建一个节点，再添加到容器中方式的运行时长，从测试来看，第二种方法优于第一种！

运行效果如下图所示：

具体代码如下：

html xmlns=' http://www。w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；字符集=GB 2312/标题将数字正射影像图节点添加到文档实例/title/head脚本类型=' text/JavaScript '//第一种：先创建所有节点，再添加到文档函数创建添加(计数){ var start=new Date()；定义变量容器=文档。创建元素(' div ')；var obj=文档。getelementbyid(' main ')；for(var I=0；icountI){ var node=document。创建元素(' div ')；节点。风格。position=“绝对”；节点。风格。left=(6 parsent(数学。random()* 100))“px”；节点。风格。top=(6 parsent(数学。random()* 100))“px”；container.appendChild(节点);} obj.appendChild(容器);var end=新日期();定义变量持续时间=结束-开始；警报('第一种方式："持续时间"毫秒);}//第二种：先添加到文档一个空容器，再创建所有接点，并分别添加到容器中函数add create(count){ var start=new Date()；定义变量容器=文档。创建元素(' div ')；var obj=文档。getelementbyid(' main ')；obj.appendChild(容器);for(var I=0；icountI){ var node=document。创建元素(' div ')；节点。风格。position=“绝对”；节点。风格。left=(6 parsent(数学。random()* 100))“px”；节点。风格。top=(6 parsent(数学。random()* 100))“px”；container.appendChild(节点);} var end=new Date()；定义变量持续时间=结束-开始；警报('第二种方式："持续时间"毫秒);}//检测输入的数据是否正确function CheckDATa(){ var number=ParSeint(文档。getelementbyid(' count ').值);退货编号；}//调用createAdd()函数函数callCreateAdd(){ var count=CheckDATa()；createAdd(计数);}//调用添加创建()函数函数callad create(){ var count=CheckDATa()；添加创建(计数);}/scriptbodyh3将数字正射影像图节点添加到文档实例/h3hr style=' border :1 px solid # 000000；' /请输入一个整数：输入类型=' text ' id=' count ' name=' count '/br/输入类型=' button ' id=' create add ' name=' create add ' value='第一种：先创建所有节点，再添加到文档方式的运行时长onClick=' callcreatedad()；/input type=' button ' id=' one ' name=' one ' value='第二种：先向文档添加一个空容器，然后每创建一个节点，再添加到容器中方式的运行时长onClick=' callad create()；/br/div id=' main ' style=' position : absolute；/div/body/html希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。