批量修改ＤＯＭ

 1 <ul id="mylist">
 2         <li><a href="http://phpied.com">Styoo</a></li>
 3         <li><a href="http://julienlecomte.com">Junior</a></li>
 4     </ul>
 5     <p>月落乌啼霜满天，江风渔火对愁眠。</p>
 6 
 7     <script type="text/javascript">
 8     var data = [
 9         {
10             "name" : "Nicolas",
11             "url" : "http://wwww.baidu.com"
12         },
13         {
14             "name" : "Rose",
15             "url" : "http://tmall.com"
16         }
17     ];
18 
19     function appendDataToElement(appendToElement, data){
20         var a, li;
21         for(var i = 0, max = data.length; i < max; i++){
22             a = document.createElement('a');
23             a.href = data[i].url;
24             a.appendChild(document.createTextNode(data[i].name));
25             li = document.createElement("li");
26             li.appendChild(a);
27             appendToElement.appendChild(li);
28         }
29     }
30 
31     var ul = document.getElementById("mylist");
32 
33     // 减少重排 ： 使元素脱离文档 --> 隐藏 再 显示
34     ul.style.display = "none";
35     appendDataToElement(ul, data);
36     ul.style.display = "block";
37 
38 
39     // 使元素脱离文档 --》 》 在文档之外创建并更新一个文档片段， 然后附加到原始列表中
40     var fragment = document.createDocumentFragment();
41     appendDataToElement(fragment, data);
42     ul.appendChild(fragment);
43 
44     // 使元素脱离文档 --<<  为需要修改的节点创建一个备份，然后对副本进行操作，再用新的节点替代旧的节点
45     var clone = ul.cloneNode(true);
46     appendDataToElement(clone, data);
47     ul.parentNode.replaceChild(clone, ul);
疯癫不成狂，有酒勿可尝；世间良辰美，终成水墨白。