javascript将DOM节点添加到文档的方法实例代码，下面对两种方法进行了比较：第一种：先创建所有节点，再添加到文档方式的运行时长；第二种：先向文档添加一个空容器，然后每创建一个节点，再添加到容器中方式的运行时长，从测试来看，第二种方法优于第一种！
运行效果如下图所示：
具体代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type"
content="text/html; charset=gb2312"
/><title>将DOM节点添加到文档实例</title></head><script type="text/javascript">//第一种：先创建所有节点，再添加到文档function
createAdd(count){var
start=new
Date();var
container=document.createElement("div");var
obj=document.getElementById("main");for(var
i=0;i<count;i++){var
node=document.createElement("div");node.style.position="absolute";node.style.left=(6+parseInt(Math.random()*100))+"px";node.style.top=(6+parseInt(Math.random()*100))+"px";container.appendChild(node);}obj.appendChild(container);var
end=new
Date();var
duration=end-start;alert("第一种方式："+duration+"ms");}//第二种：先添加到文档一个空容器，再创建所有接点，并分别添加到容器中function
addCreate(count){var
start=new
Date();var
container=document.createElement("div");var
obj=document.getElementById("main");obj.appendChild(container);for(var
i=0;i<count;i++){var
node=document.createElement("div");node.style.position="absolute";node.style.left=(6+parseInt(Math.random()*100))+"px";node.style.top=(6+parseInt(Math.random()*100))+"px";container.appendChild(node); }var
end=new
Date();var
duration=end-start;alert("第二种方式："+duration+"ms");}//检测输入的数据是否正确function
checkData(){var
number=parseInt(document.getElementById("count").value);return
number;}//调用createAdd()函数function
callCreateAdd(){var
count=checkData();createAdd(count);}//调用addCreate()函数function
callAddCreate(){var
count=checkData();addCreate(count);}</script><body><h3>将DOM节点添加到文档实例</h3><hr style="border:1px solid #000000;"
/>请输入一个整数：<input type="text"
id="count"
name="count"
/><br /><input type="button"
id="createadd"
name="createadd"
value="第一种：先创建所有节点，再添加到文档方式的运行时长"
onClick="callCreateAdd();"
/><input type="button"
id="one"
name="one"
value="第二种：先向文档添加一个空容器，然后每创建一个节点，再添加到容器中方式的运行时长"
onClick="callAddCreate();"
/><br /><div id="main"
style="position:absolute;"></div></body></html> |