1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 5 <title></title> 6 </head> 7 <body> 8 <ul id="mylist"> 9 <li><a href="http://phpied.com">Stoyan</a></li> 10 <li><a href="http://julienlecomte.com">Julien</a></li> 11 </ul> 12 <script type="text/javascript" src="index.js"></script> 13 </body> 14 </html>
在文档之外创建并更新一个文档片断，然后把它附加到原始列表中。（文档片断相当于word2003复制以后右边出现的复制片断概念）
1 //最小化重绘和重排 2 var data = [{ 3 "name": "Nicholas", 4 "url": "http://nczonline.net" 5 }, { 6 "name": "Ross", 7 "url": "http://techfoolery" 8 }]; 9 10 function appendDataToElement(appendToElement, data) { 11 var a, li; 12 for (var i = 0, max = data.length; i < max; i++) { 13 a = document.createElement('a'); 14 a.href = data[i].url; 15 a.appendChild(document.createTextNode(data[i].name)); 16 li = document.createElement('li'); 17 li.appendChild(a); 18 appendToElement.appendChild(li); 19 } 20 } 21 22 var fragment = document.createDocumentFragment(); 23 appendDataToElement(fragment, data); 24 document.getElementById("mylist").appendChild(fragment);
createDocumentFragment()方法，有些团队成员可能并不熟悉这项技术。