template要素は、JavaScriptでコンテンツを動的に挿入する際、そのコンテンツをDOM構造のテンプレートとして用いるための要素です。

template要素のコンテンツはHTML文書上で使用されない文書断片(不活性なDOMサブツリー)の宣言を許可する要素ですが、ページ読み込み時には事実上template要素の子要素として解釈され、JavaScriptから利用可能となります。

使用例

<select id="target-01">

<option value="">選択してください</option>

</select>



<template id="template-01">

<option>-</option>

</template>



<script>

(function ($) {

    'use strict';



    var $target = $('#target-01');

    var $template = $('#template-01');

    var $clone = {};

    var i = 0;

    var leng = 10;



    for (i; i < leng; i++) {

        // 10回option要素を出力する

        $clone = $($template.html());

        $target.append($clone.text(i).val(i));

    }

})(window.jQuery);

</script>

使用可能な属性

  • 全てのグローバル属性

コンテンツカテゴリ

  • メタデータコンテンツ
  • フローコンテンツ
  • フレージングコンテンツ
  • スクリプトサポート要素

子要素にしていい要素の種類

WHATWGの仕様上は、template要素は子要素を持たず、templateタグでマークアップされた文字列は別ドキュメントのように解釈されます。以下は、W3Cの仕様書に記述されている、事実上実装時にtemplateタグの中に記述してよいコンテンツの構造について記します。

  • メタデータコンテンツ
  • フローコンテンツ
  • 次の要素の「子要素にしていい要素の種類」
    • ol要素
    • dl要素
    • figure要素
    • ruby要素
    • object要素
    • video要素
    • audio要素
    • table要素
    • colgroup要素
    • thead要素
    • tbody要素
    • tfoot要素
    • tr要素
    • fieldset要素
    • select要素
    • details要素
  • menu要素
    • type属性がポップアップメニュー内に書かれている場合

親要素にしていい要素の種類

  • メタデータコンテンツが期待されているすべての要素
  • フレージングコンテンツが期待されているすべての要素
  • スクリプトサポート要素が期待されているすべての要素
  • colgroup要素
    • span属性を持たない場合

仕様書と策定状況

仕様書 策定状況
W3C 勧告
WHATWG Living Standard
最終更新:2016年7月31日

ミツエーリンクスでは、デジタルメディアにおける企業と顧客とのコミュニケーション課題を解決する、さまざまなサービスをご提供しています。ぜひ一度サービスページをご覧ください。

関連情報