LoginSignup
1

More than 3 years have passed since last update.

TemplateタグがIEで動かない時

Posted at

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が利用できるようになります。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1