JavaScriptでテンプレート的なことをやってみようかと思って試しに、

<script language="javascript">
function add() {
var clone = document.getElementById('template').cloneNode(true);
var contents = document.getElementById('contents');
contents.appendChild(clone);
clone.all('title').innerHTML = '<h1>タイトル</h1>';
clone.all('number').innerText = Math.random() * 100;
clone.style.display = "block";
}
</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>

とかやってみたんだけど、allってIEでしか使えない（というか、Mozilla系では使えない）のか。Mozilla系でも使えるようにするには、どう書けばいいんだろう？

惜しい

DIVの子エレメントを取得できないなら、元テンプレートの内容を書き換えちゃってからcloneNodeしてしまえ！　と思ったんだけど、Firefoxではなんか挙動が変だ。title、numberを書き換えると一個前にcloneNodeした内容まで書き換わってしまう。cloneNodeしてもIDが一緒だから、getElementById('title')とかしたターゲットがtemplateの中身だと絞れていないってことか？　IEだとこっちでも正常に動いているんだけど。 　そういやFirefoxでは中身が空のspanのinnerTextは設定できなかった（多分createTextNodeしなきゃダメなんだと思う）んで、innerHTMLに変えた。

<script language="javascript">
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');
contents.appendChild(clone);
clone.style.display = "block";
}
</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>

やっと動くようになった

なんか無駄に回りくどいんだけど、互換性のためにはこう書かなきゃだめなの？　もっと短くて両対応な書き方あるかなー。

<script language="javascript">
function add() {
var contents = document.getElementById('contents');
var template = document.getElementById('template');
var clone = template.cloneNode(true);
contents.appendChild(clone);
var title = getChildElementByClass(clone, 'title');
if (title) {title.innerHTML = 'タイトル';}
var number = getChildElementByClass(clone, 'number');
if (number) {number.innerHTML = (Math.random() * 100).toString();}
clone.style.display = "block";
}
function getChildElementByClass(pnode, className) {
for (var i = 0; i < pnode.childNodes.length; i++) {
var current = pnode.childNodes[i];
if (current.className == className) {return current;}
}
}
</script>
<a onclick="add()">add</a>
<div id="template" style="display: none;">
<h1 class="title">default title</h1>
<span class="number">default number</span>
</div>
<div id="contents">
</div>