TemplateタグがIEで動かない時の書き換え方法についてです。
元のコードサンプル
templateメソッドを利用してJavaScriptではそれをimportNodeをしてNodeをコピーしています。
htmlファイル
<body>
<a href='#' onclick='listRefresh();'>リスト更新</a>
<div id='example'>
<ul>
</ul>
</div>
<template id="test_template">
<li class="item" >
<p class="text">
<span class="name"></span>
<span class="address"></span>
</p>
</li>
</template>
</body>
<script src="./template.js"></script>
jsファイル
let listRefresh = function() {
let json = [
{ name: "鈴木 太郎", address: "東京都千代田区1-1"},
{ name: "山田 花子", address: "大阪府大阪市1-1"}
];
let template = document.getElementById('test_template');
let example = document.getElementById('example').querySelector('ul');
example.textContent = null;
json.forEach((val) => {
let clone = document.importNode(template.content, true);
clone.querySelector('li.item p.text span.name').textContent = val.name;
clone.querySelector('li.item p.text span.address').textContent = val.address;
example.appendChild(clone);
});
}
この方法だとモダンなブラウザ(Chormeなど)では動作するのですが、IEだとimportNode
やそもそもHTMLのtemplateタグ
でエラーが発生して動きません。
また、IEの場合templateタグの中はそのまま表示されてしまう状態です。
なので以下のように書き換えてあげれば良いのかなと思います。
改善後
ポイント
- templateタグ
templateタグは<script type="text/template">
に置き換えます - importNode
importNodeについては、新しくファンクションを作成してその中でinnerHTMLをコピーして新しくNodeを作成して返却するという流れになります。
コード
htmlファイル
<body>
<a href='#' onclick='listRefresh();'>リスト更新</a>
<div id='example'>
<ul>
</ul>
</div>
<script id="test_template" type="text/template">
<li class="item" >
<p class="text">
<span class="name"></span>
<span class="address"></span>
</p>
</li>
</script>
</body>
<script src="./template2.js"></script>
jsファイル
let listRefresh = function() {
let json = [
{ name: "鈴木 太郎", address: "東京都千代田区1-1"},
{ name: "山田 花子", address: "大阪府大阪市1-1"}
];
let template = document.getElementById('test_template');
let example = document.getElementById('example').querySelector('ul');
example.textContent = null;
json.forEach((val) => {
let clone = getCloneNode(template);
clone.querySelector('li.item p.text span.name').textContent = val.name;
clone.querySelector('li.item p.text span.address').textContent = val.address;
example.appendChild(clone);
});
}
let getCloneNode = function(source) {
let clone = document.createElement('div');
clone.innerHTML = source.innerHTML;
return clone;
}
これで無事IEでもtemplateが利用できるようになります。