テンプレート - cartoohのメモ

javascriptでテンプレート的なことをやる方法は？: http://tdiary.ishinao.net/20050225.html#p06
Javascriptでテンプレート的な…: http://www.akatsukinishisu.net/itazuragaki/js/like_template.html

なんとなく，自分なりに作り直してみた

<script type="text/javascript" language="JavaScript">
<!--
  function append(contents, clone) {
    clone.id += contents.childNodes.length;
    for(var i = 0; i < clone.childNodes.length; ++i) {
      if(!clone.childNodes[i].id) continue;
      clone.childNodes[i].id += contents.childNodes.length;
    }
    contents.appendChild(clone);
  }
  function add() {
    document.getElementById('title').innerHTML = '<h1>タイトル</h1>';
    document.getElementById('number').innerHTML = (Math.random() * 100).toString();

    var clone = document.getElementById('template').cloneNode(true);
    var contents = document.getElementById('contents');
    clone.style.display = "block";
    append(contents, clone);
  }
// -->
</script>


<a onClick="add()">add</a>

<div id="template" style="display: none;">
  <span id="title"></span>
  <span id="number"></span>
</div>

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

どうやら，firefoxはidの扱いがほかと違う気がする．cloneNodeとかで同じidを複数もつやつが現れると，idを最後に上書きしたelementが，そのidを所有するみたい．

だから，一番手っ取り早い解決方法はcontentsをtemplateの前にもってくれば，ほかと一緒の挙動になるみたい．ただ，場所によって挙動が変わるから，コピーしたもののidを書き換えるほうが汎用性は高いかな．

operaとかIEだと，一番初めに初期化されたもので，書き換えないのかなと思ったけどそうじゃないみたい．contentsとtemplateの場所入れ替えても挙動変わらなかったし．idの所有権というかはどう処理してるのだろ．動的に生成されたelementのidは無視してるのかも