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

JavaScript

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

スポンサーリンク
スポンサーリンク

コード例

<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()でディープコピーして使うのが一般的です。

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

古い方法

かつてはscriptタグで以下のようなテンプレートを用意して、

<script type="text/html" id="hoge-template">
...
</script>

div要素を作成して、innerHTMLとかでごにょごにょしてたんですけど。。。

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);

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

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

スポンサーリンク
管理人

1983年生まれのえんじにゃー🐈
趣味はエレキギターなど。作曲したい。
WoWs/プリコネ/デレステ
記事に関する質問はお気軽にどうぞ。

たかおファン(surface0)をフォローする
たかおファン(surface0)をフォローする
Rain or Shine

コメント

タイトルとURLをコピーしました