[JavaScript] JSでHTMLのテンプレートを扱うシンプルな方法

  • このエントリーをはてなブックマークに追加

templateタグの使用例。覚え書きですよ
<template> – HTML | MDN

例えばリストの項目を動的に追加する例について。

コード例

<template id="hoge-template">
<li>ListItem <span class="number"></span></li>
</template>

<ul id="hoge-list"></ul>

<script>
const tmpl = document.getElementById('hoge-template');
const hogeList = document.getElementById('hoge-list');

for (var i = 1; i <= 10; i++) {
    var listItem = document.importNode(tmpl.content, true);
    listItem.querySelector('.number').textContent = i;
    hogeList.appendChild(listItem);
}
</script>

ここで、tmpl.contentDocumentFragmentであり、そのまま使うことも可能ですが、appendChild()したタイミングで中身がparentNodeに移植されてしまうので、再利用できなくなります。その為document.importNode()でディープコピーして使うのが一般的です。

DocumentFragment – Web API インターフェイス | MDN

ちなみにtemplate内にscriptタグを書いたとしても、そのままでは不活性になり、DOMノードに追加された時点で初めて活性化されるので、テンプレートとセットで使いたいスクリプトを仕込んでおくのにも最適です。

古い方法

かつてはscriptタグで以下のようなテンプレートを用意して、
[html title=”old.html”]

[/html]

div要素を作成して、innerHTMLとかでごにょごにょしてたんですけど。。。
[js]
var tmpl = document.getElementById(‘hoge-template’);
var div = document.createElement(‘div’);
var hogeList = document.getElementById(‘hoge-list’);
div.innerHTML = tmpl.innerHTML;

hogeList.appendChild(div.firstChild);
[/js]

わざわざ無関係のdiv作ってやってた時よりスマートですね。
しかも、後者ではテンプレート内にJSのコードを仕込んでも動作しなかったのですが、前者のコードではしっかり動作します。
これはかなりの差ですな。

ちなみにIE11ではtemplate要素が使えないので無効。逝ってよし

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。




コメントを残す