javascript - script里面写html是什么东西

大家讲道理    2017-06-12 09:33:071楼

这是 jQuery 时代常见的 HTML 模板。形如下面的代码

<script id="my-template" type="text/x-custom-template">
    <p class="xxx">
        <p class="yyy">%name%</p>
        <p class="zzz">%value%</p>
    </p>
</script>

script 标签使得模板内容不会显示在页面上。从而在使用 jQuery 渲染数据时，就不需要 HTML 字符串拼接，而只要直接取出模板中的 HTML 文本，用 JS 做正则替换即可：

var template = document.getElementById("my-template").innerHTML;
var html = template
            .replace(/%name%/, data['name'])
            .replace(/%value%/, data['value']);
// insert HTML...

这样就可以很轻松地把 Ajax 获取的 JSON 数据渲染成带样式的 HTML 文本了。

 赞 +0添加回复