■メリット
- innerHTMLより高速に動作
- NodeListのクローンを作成できる
- NodeListをappendChildに使える
■解説
どの文献を読んでもいまいちピンとこなかったので、自分でサンプルを作ってみた。その結果、documentFragmentオブジェクトに構造を投げ入れ、それを貼り付けると高速で動作するみたいな感じだった。(言葉の使い方はいい加減)
■サンプルスクリプト(js/docf.js)
window.onload = function(){ //documentFragmentオブジェクトの生成 var dfobj = document.createDocumentFragment(); //documentFragmentループの下準備 var addLists = document.getElementById('addtionalLists').getElementsByTagName('li'); //documentFragmentに構造を投げ込む for(var i=0; i<addLists.length; i++){ var clnLi = addLists.item(i).cloneNode(true); dfobj.appendChild(clnLi); } //documentFragmentのクローンを貼り付ける var tgtUL = document.getElementById('basedlist'); //var clnDf = dfobj.cloneNode(true); //tgtUL.appendChild(clnDf); tgtUL.appendChild(dfobj); }
■サンプルHTMLファイル(index.html)
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>documentFragment</title> <script type="text/javascript" src="js/docf.js"></script> </head> <body> <table id="table"> <tr> <td> <ul id="basedlist"> <li>text1</li> </ul> </td> </tr> </table> <div id="exp1"> <ul id="addtionalLists"> <li>documentFragment</li> <li>documentFragment</li> <li>documentFragment</li> <li>documentFragment</li> <li>documentFragment</li> <li>documentFragment</li> <li>documentFragment</li> <li>documentFragment</li> <li>documentFragment</li> <li>documentFragment</li> <li>documentFragment</li> <li>documentFragment</li> <li>documentFragment</li> </ul> </div> </body> </html>