■メリット
- 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>