HTMLのtemplate要素を使ってJavaScriptからのDOM挿入の可読性を高くする

簡単な動的HTMLページを作る際、JavaScript上でDOMを構築して挿入することでそれを実現できます。
しかし、この方法だと最終的にどのようなDOMが挿入されるのかがわかりづらいです。
HTMLのtemplate要素を使うことで、JavaScript上でDOMを構築しなくてよくなります。

HTML template要素とは

template要素とはその名の通り、HTMLドキュメントにHTMLの断片を埋め込むことができる機能です。
temlplate要素はブラウザ上でレンダリングされることはありません。
このtemplate要素をJavaScriptで取得し、値を設定してドキュメントに挿入することでJavaScript上でDOMを構築する必要が無くなります。

template要素を使ったDOM挿入サンプルコード

使い方は実際のソースを見た方が早いと思います。
以下にサンプルコードを載せておきます。

template挿入前HTML

<!-- HTML本体 -->
<div class="wrapper"></div>

<!-- template -->
<template id="sample_template">
  <label></label>
</template>

<script src="./sample.js"></script>

sample.js

// DOM読み込み後に実行
document.addEventListener("DOMContentLoaded", function() {
  // ブラウザがtemplateに対応していない場合
  if (!'content' in document.createElement('template')) {
    // wrapperを非表示にして終了
    document.querySelector('.wrapper').setAttribute('style', 'display:none;');
    return;
  }

  // templateをオブジェクトに読み込んでコピー
  var template = document.querySelector('#sample_template');
  var clone = document.importNode(template.content, true);

  // templeteにinnerTextを設定
  var labelElem = clone.querySelector('label');  //getElementByIdなどでは取得できないので注意
  labelElem.innerText = 'Templateサンプル';
  
  // wrapper要素の下に挿入
  document.querySelector('.wrapper').appendChild(clone);
  return;
})

template挿入後HTML

<!-- HTML本体 -->
<div class="wrapper">
  <!-- 挿入されたtemplate要素 -->
  <label>Templateサンプル</label>
</div>

<!-- template -->
<template id="sample_template">
  <label></label>
</template>

<script src="./sample.js"></script>

このようにtemplate要素を使用することで、動的ODM挿入処理の可読性を高めることができます。