Js script type="text/template"的使用简单说明

    <script type="text/template" id="treeTableTpl">
        <tr id="{{row.id}}" pId="{{pid}}">
            <td><a href="${ctx}/sys/area/form?id={{row.id}}">{{row.name}}</a></td>
            <td>{{row.code}}</td>
            <td>{{dict.type}}</td>
            <td>{{row.remarks}}</td>
            <shiro:hasPermission name="sys:area:edit"><td>
                <a href="${ctx}/sys/area/form?id={{row.id}}">修改</a>
                <a href="${ctx}/sys/area/delete?id={{row.id}}" onclick="return confirmx('要删除该区域及所有子区域项吗？', this.href)">删除</a>
                <a href="${ctx}/sys/area/form?parent.id={{row.id}}">添加下级区域</a> 
            </td></shiro:hasPermission>
        </tr>
    </script> 

给script标签设置type="text/template"属性，标签里的内容不会被执行，也不会显示在页面上，但是可以在另外一个script里面通过获取插入到页面上。这样可以把大段的html和js进行分离。

这一段存放了一个模板。
在js里面，经常需要使用js往页面中插入html内容。比如这样：

var number = 123;
$('#d').append('<div class="t">'+number+'</div>')

如果html很短还好说，但是遇到描述里面的这么大段，直接用字符串存储会很困难，因为不光要处理单引号，还需要很多「+」号把字符串一个个连接起来，十分的不方便。
给<script>设置type="text/template"，标签里面的内容不会被执行，也不会显示在页面上，但是可以在另一个script里面通过获取，然后再通过相关的模板工具进行处理，插入到页面中。这样就把大段的HTML操作从js里面分离开了。

链接：https://www.zhihu.com/question/23067588/answer/23505936