什么'；使用JavaScript或JQuery生成和附加HTML是一种干净高效的方法？

我本来想问（直到我发现已经有人问了），现在我有了这个问题的答案：

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

现在我有一个不幸的任务，就是用JavaScript生成HTML以附加到我的文档中，我不知道如何最好地实现这一点

使用PHP，我可以简单地存储一个HTML文件，然后使用

file\u get\u contents（）

和regex用相关信息替换一些标记，但是我认为使用JavaScript并不容易

我想到的一些方法：

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

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

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

var html=''+
“”+作者+”：“+
“”+内容+”
”+
'';
$（“#注释”）.append（html）；

将字符串存储在某个位置，然后在该位置使用正则表达式，如下所示：

var commentHTML = '<div class="cmt"><strong>{auth}</strong>: {cmt}</div>';

var commentHTML='{auth}：{cmt}'；

---

是否有一个库/插件可以更好地处理这个问题？我真的很想避免用字符串中存储的HTML块来混淆JavaScript。也许有一种类似于我提到的使用PHP的方法？JavaScript可以读取HTML文件并将内容存储为字符串吗？

恭喜，你刚刚发明了Mustache.js。请查看：

var data={作者：“作者”，内容：“某些内容”}；
var template=“{{author}}：{{comment}”；
var html=Mustache.render（模板、数据）；

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

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

使用它也很简单

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

---

仅仅是名称就让它很棒。但是，是否可以将HTML存储在它们自己的文件中？@MartyWallace是的。您需要AJAX加载它们，然后将响应文本提供给

render（）

一些阅读帮助我理解了这个答案：这个反模式已经被彻底解决了。要不惜一切代价避免。@mattmald与其链接一篇98%噪音的文章，不如改用理性

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)