[HTML][JavaScript]templateタグを使う

本日のグノシー経由でHTML で利用可能になった Template タグをちょっと試してみる。

<script>
  jQuery(function($){

    if(!supportsTemplate())return;

    var $template = $('template');
    var content = $template[0].content;
    var clone = content.cloneNode(true);
    clone.querySelector('#foo').textContent = 'say ho';

    var $hoge = $('#hoge');
    $hoge.append($(clone));

    function supportsTemplate() {
      return 'content' in document.createElement('template');
    }

  });
</script>
<div id="hoge"></div>
<template>
  <div id="foo"></div>
</template>

chromeで実行した結果、「say ho」と表示されたが、IE9では何も表示されない。

IE10を試してないので、断定はできないが少なくともIE9までは未対応のようだ。


確かに便利といえば便利だが、underscore.jsのように動的にhtmlの出力を制御することができるのだろうか？

また、毎回、毎回、textContentメソッドを使うのがうざい。

もうちょっと使いやすくならないのだろうか？