Question

我想知道如何使用jQuery创建和附加HTML。显然，编写这样的20-25甚至更多行代码是很麻烦的：

 "<h1>"+response.name+"</h1>" +
   "<p>"+response.description+"</p>" + and so on

Answer 1

如果您拥有（或多或少）固定的标记结构，并反复想用变量值填充它，则可以考虑使用模板。

有很多用于JS的模板引擎，但也要保持简单，这里是一个使用mustache.js的示例：

<script src="mustache.js" type="text/javascript"></script>

<script id="template" type="x-tmpl-mustache">
    <h1>{{name}}</h1>
    <p>{{description}}</p>
    {{#optionalVar1}}
        <p>{{#optionalVar1}}</p>
    {{/optionalVar1}}
</script>

<script type="text/javascript">
    var template = document.querySelector('#template').innerHTML;

    /* "response" should be an object containing named members as
     * in the template above. "{{name}}" refers to "response.name" */
    var rendered = Mustache.render(template, response);
    document.querySelector('#output').innerHTML = rendered;
</script>

Answer 2

这里是在jQuery中创建和附加html的示例

$('body').append($('h1').text(response.name))
   .append($('p').text(response.description))
   ... append as much as you want
;

如何使用jQuery创建和附加HTML？

2 个答案: