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

Question

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

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

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

使用PHP，我可以简单地存储一个HTML文件，然后使用file_get_contents()和regex用相关信息替换一些令牌，但是我不认为用JavaScript这么容易。

我想到的一些方法：

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

    var html = '<div class="comment">' + '<strong>' + author + '</strong>: ' + '<p>' + content + '</p>' + '</div>'; $("#comments").append(html); 

2. 将字符串存储在某处，然后在其上使用正则表达式，这可能如下所示：

    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)