DocumentFragmentオブジェクトに対して何度もappendChildメソッドを実行すると、メソッドの実行に失敗してオブジェクトの中身が空になることがある。
<script type="text/javascript">
function df() {
var addsource = document.getElementById('source').getElementsByTagName('li');
var addlist = document.createDocumentFragment();
for(i = 0; i < addsource.length; i++) {
addlist.appendChild(addsource.item(i).cloneNode(true));
}
var distel = document.getElementById('dist');
distel.appendChild(addlist.cloneNode(true));
}
</script>
<ol id="dist">
<li>↓追加</li>
</ol>
<ol id="source" style="display:none;">
<li>追加</li><li>追加</li><li>追加</li><li>追加</li><li>追加</li>
<li>追加</li><li>追加</li><li>追加</li><li>追加</li><li>追加</li>
</ol>
<p><a href="javascript:df();">スクリプト実行</a></p>
「スクリプト実行」のリンクを選択するとol要素にリストアイテムが10個追加されるはずです。
JavaScript について ? な挙動を見つけたので書いて見ます。
Opera 7.22 ja 、Opera 7.23 ja において
DocumentFragment オブジェクトに appendChild を繰り返すと
少ない確率で失敗するようです。
失敗したときは追加先のオブジェクトが空になります。