javascript - script裡面寫html是什麼東西

Question

我看到有些網站是script標籤裡面寫html。正確不是該寫js的嗎？ ？

Answer 1

這是 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 文字了。