script "text/template"

转载于 2016-08-30 16:28:00 发布 · 238 阅读

本文介绍了一种使用HTML的<script>标签结合type=text/template属性来存储和管理JS模板的方法，这种方法可以有效避免在JS代码中直接操作复杂的HTML结构所带来的不便。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script type="text/template" id="orgItem">
    <div class="{orgClass}">
        <div class="org-item {hasorg}" data-orgid="{orgid}">
            <i class="ico ico-orgzk"></i>
            <div class="org-item-bd">{name}</div>
        </div>
        <div class="org-item-ft"></div>
    </div>
</script>

存放一个模板在JS中，经常需要使用JS往页面中插入HMTL内容.比如： var number=123; $('#id').appedn('<div class="item">'+number+'</div>');

如果HTML内容很短还好说，但是当遇到像上面这样的大段的HTML内容时，直接用字符串存储就会很困难，不光要处理单引号，还需要很多“+”来链接一个个字符串，十分不方便

如果给<script>设置type="text/template",标签里面的内容就不会被执行，也不会被显示在页面上，但是可以在另一个script里面通过获取和相关的模板工具进行处理，插入到页面中。

这样就把大段的HTML操作从JS中分离开了