仓库源文，站点原文

title: 换个标签写前端模板 categories:

• JavaScript
• 前端杂烩 tags:
• tech
• cnblogs warning: true date: 2014-04-13 02:21:00 fromUrl: http://www.cnblogs.com/hustskyking/archive/2014/04/13/javascript-template-tag.html from: 博客园

<script type="text/x-template" id="tpl">
    <h1><%=data.title%></h1>
    <p><%=data.content%></p>
</script>
<script>
    var htmlTpl = document.getElementById("tpl").innerHTML;
    tplEngine(htmlTpl, {
        title: "This is title",
        content: "This is content"
    });
</script>

<ul id="list">
    <!-- TEMPLATE 模板 -->
    <template id="tpl">
        <li><span></span> - <span></span></li>
    </template>
</ul>
<button id="btn">见证奇迹的时刻→</button>
<script>
    var datas = [
        {name:"李靖", age:"21"},
        {name:"Barret Lee", age:"21"}
    ];
    btn.onclick = function(){
        for(var i = 0, len = datas.length; i < len; i++){
            var data = datas[i];
            // 获取模板代码
            var htmlTpl = tpl.content.cloneNode(true);
            // 插入数据
            var spans = htmlTpl.querySelectorAll("span");
            spans[0].textContent = data.name;
            spans[1].textContent = data.age;
            // 插入到 DOM 中
            list.appendChild(htmlTpl);
        }
    };
</script>

document.getElementById("tpl").content

htmlTpl = tpl.content.cloneNode(true);

if (!"content" in document.createElement("template")){
    // code here..
    return;
}

<h4>3. 模板中嵌入模板</h4>

<template id="ulList">
    <li>
        <strong><%=content%></%=content%></strong>
        <template>
            <div>
                <p><%=detail%></%=detail%></p>
            </div>
        </template>
    </li>
</template>

var tpl = ulList.getElementsByTagName("template")[0]; // 获取模板
var toBox = tpl.parentNode; // 直接定位要插入的位置
toBox.appendChild(tpl.content.cloneNode(true)); // 插入

<h3>五、拓展 web components</h3>

<p>Web Components 是一些规范，旨在以浏览器原生的方式向外提供组件，它的规范如下:</p>