■メリット
- 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>
■参考
DocumentFragmentの考察 – Personnel