HTML - template 要素

概要

名前
template
カテゴリー
  • Metadata content
  • Flow content
  • Phrasing content
  • Script-supporting element
配置できる場所
  • Metadata content が期待される場所。
  • Phrasing content が期待される場所。
  • Script-supporting element が期待される場所。
  • span 属性を持たない colgroup 要素の子要素。
コンテンツモデル
なし。
説明
template 要素は、その部分がスクリプトによって内容を追加したり増やしたりするためのテンプレートであることを宣言する要素です。
タグの省略
開始タグも終了タグも省略できません。
DOM Interface
HTMLTemplateElement
仕様書
仕様書策定状況コメント
LS:現行の標準
REC:勧告
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
×1322268158
○:Support ×:Not Support ?:未定義 n:以降の Version で Support

属性

グローバル属性
すべての要素で共通に利用できるグローバル属性を指定できます。

サンプルコード

template 要素のサンプルコードは以下のとおりです。

<!-- HTML -->

<template id="templatetest">
  <p>テンプレートのテスト</p>
</template>

<div id="view"></div>


/* Javascript */

// template要素を取得
var targetElement = document.getElementById("templatetest");

// 内容を複製
var cloneContent = targetElement.content.cloneNode(true);

// div#viewの中に追加
document.getElementById("view").appendChild(cloneContent);
template 要素のサンプルコード

関連記事

HTML の全般的な記事はHTML タグの基本と使い方を参照してください。

Category:
プログラミング
公開日:
更新日:
Pageviews:
10
Shares:
0
Tag:
HTML
hatebu icon
hatebu