template要素

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属性がポップアップメニュー内に書かれている場合