javascript - What is html written in script?

Question

I saw that some websites write html in the script tag. Isn't it correct to write js? ?

Answer 1

This is a common HTML template in the jQuery era. The code looks like the following

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

The

script tag prevents template content from being displayed on the page. Therefore, when using jQuery to render data, there is no need for HTML string concatenation. Instead, you only need to directly take out the HTML text in the template and use JS to do regular replacement:

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

In this way, you can easily render the JSON data obtained by Ajax into styled HTML text.