Javascriptでテンプレート的な…

tdiary.ishinao.netの2月25日分でjavascriptでテンプレート的なことをやる方法は？という試みがあったので、自分でも試しにやってみました。

<script type="text/javascript">
function add() {
  var div = document.createElement('div');
  div.id = 'id' + document.getElementsByTagName('div').length;
  var tmpl = document.getElementById('template');
  for (var i = 0; i < tmpl.childNodes.length; i++) {
    div.appendChild(tmpl.childNodes[i].cloneNode(true));
  }
  var contents = document.getElementById('contents');
  contents.appendChild(div);
  var heading = div.getElementsByTagName('h1')[0];
  heading.appendChild(document.createTextNode('タイトル'));
  var para = div.getElementsByTagName('p')[0];
  var num = Math.random() * 100 + ''
  para.appendChild(document.createTextNode(num)); 
}

</script>

<button onclick="add()">add</button>

<div id="template" style="display: none;">
<h1></h1>
<p></p>

</div>

<div id="contents">
</div>

一応DOM HTMLに沿って書いたつもりです。FirefoxとWinIE6で動作を確認。以下を参考にしました。(よく考えたらdocumentFragmentは要らなかったので少し修正)

cloneNodeしてもIDが一緒だから、getElementById('title')とかしたターゲットがtemplateの中身だと絞れていないってことか？　IEだとこっちでも正常に動いているんだけど。

HTMLでは、id属性の値は一意でなくてはならないので、Firefoxが意図した動きにならないのは仕方が無いように思います。