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

templateタグの使用例。覚え書きですよ

: コンテンツテンプレート要素 - HTML: ハイパーテキストマークアップ言語 | MDN

は HTML の要素で、ページが読み込まれたときにすぐにレンダリングされるのではなく、実行時に JavaScript を使って後からインスタンス化することができる HTML を保持するためのメカニズムです。

developer.mozilla.org

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

コード例

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

DocumentFragment - Web API | MDN

DocumentFragment インターフェイスは、親ノードを持たない最小限の文書オブジェクト（文書フラグメント）を表します。

developer.mozilla.org

ちなみに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要素が使えないので無効。逝ってよし