template要素を使ってみる

JavaScriptでインスタンスの生成・操作ができるHTMLテンプレートを用意できる「template要素」を使ってみます。

対応ブラウザ

template要素の対応ブラウザはこちら
IEでは非対応ですが、それ以外の主要ブラウザは問題なく使えそうです。

サンプルコード

実際にtemplate要素を使ってみます。
まずはHTMLです。

<div id="article-list"></div>

<template id="article-template">
	<div class="article-item">
		<h2 class="article-ttl"></h2>
		<p class="article-url">公式サイト:<a href=""></a></p>
	</div>
</template>

#article-template内がテンプレートで、このテンプレートを使って#article-list内に記事一覧を出力する想定です。
template要素内は特に非表示の対応などを行わなくても、ページ上には表示されません。

次にJavaScriptで操作してみます。
今回は配列のデータを一覧で出力してみます。

var articleData = [
	{
		"title": "とある科学の超電磁砲T",
		"url": "https://toaru-project.com/railgun_t/"
	}, {
		"title": "ランウェイで笑って",
		"url": "https://runway-anime.com/"
	}, {
		"title": "ダーウィンズゲーム",
		"url": "https://darwins-game.com/"
	}
];

// ブラウザがtemplate要素に対応しているか確認
if ('content' in document.createElement('template')) {
	// template要素を取得
	var template = document.getElementById('article-template');
	var fragment = document.createDocumentFragment();
	for (var i = 0; i < articleData.length; i++) {
		// template要素からコンテンツを複製
		var clone = document.importNode(template.content, true);
		// 複製した各要素に値を設定
		clone.querySelector('.article-ttl').textContent = articleData[i]['title'];
		clone.querySelector('.article-url a').textContent = articleData[i]['url'];
		clone.querySelector('.article-url a').href = articleData[i]['url'];
		fragment.appendChild(clone);
	}
	document.getElementById('article-list').appendChild(fragment);

// template要素に対応していない場合
} else {
	console.log('template要素に対応していません。');
}

これで#article-list内に一覧を出力することができました。
template要素のデモページ