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