Question

我打算问this question（直到我发现它已被问到），现在得到了这个问题的答案：

最好从PHP脚本请求JSON，然后使用JavaScript将结果包装在HTML中。

现在我有一个不幸的任务，即使用JavaScript生成HTML以附加到我的文档中，并且不确定如何最好地处理它。

使用PHP，我可以简单地存储一个HTML文件，然后使用file_get_contents()和正则表达式将一些令牌替换为相关信息，但我不认为使用JavaScript会如此简单。

我想到的一些方法：

令人厌恶的方法。生成一个巨大的丑陋字符串，然后追加：

var html = '<div class="comment">' +
    '<strong>' + author + '</strong>: ' +
    '<p>' + content + '</p>' +
'</div>';

$("#comments").append(html);

将字符串存储在某处，然后在其上使用正则表达式，可能如下所示：
```
var commentHTML = '<div class="cmt"><strong>{auth}</strong>: {cmt}</div>';
```

是否有可以更好地处理此问题的库/插件？使用存储在字符串中的大量HTML来摆弄我的JavaScript是我真正希望避免的。也许我提到的使用PHP的方法有类似的方法？ JavaScript可以读取HTML文件并将内容存储为字符串吗？

Answer 1

恭喜，你刚刚发明了Mustache.js。看看：https://github.com/janl/mustache.js

var data = { author: "An Author", content: "Some content" };
var template = "<div class='cmt'><strong>{{author}}</strong>: {{comment}</div>";
var html = Mustache.render(template, data);

Answer 2

您可以将模板内联为任意类型的脚本

<script id="my-template" type="template">
    <div class="comment">
        <strong>%s</strong>:
        <p>%s</p>
    </div>
</script>

编写一个函数将“模板”转换为文档片段是微不足道的

function fragment(html) {
    var args = arguments,
        div = document.createElement('div'),
        i = 1

    div.innerHTML = html.replace(/%s/g, function(){
        return String(args[i++])
    })

    return div.firstChild
}

使用它也很简单

fragment(document.getElementById("my-template").textContent, author, comment)

使用JavaScript或JQuery生成和附加HTML的干净有效方法是什么？

2 个答案: