Javascript 在jQuery/JS中生成复杂html层次结构的最佳方法

我正在制作一个web应用程序，其中许多内容是由json在JS中生成的。我不知道怎么做才对，所以我只是生成复杂的html片段，就像字符串一样。这似乎不是最好的方法，因为它失去了普通html的许多优点：语法高亮显示、制表、每行后面加上符号：

    $('#chatlist').append(
        "<div class='chatlist_cell'>" +
            "<div class='chatlist_cell_inner'>" +
                "<div style='float: left;'>" +
                    "<img class='chatlist_avatar' src='/images/ui/user_placeholder.svg'>" +
                "</div>" +
                "<div style='float: left; padding-left: 10px;'>" +
                    "<div class='chatlist_title'>" + title + "</div>" +
                    "<div class='chatlist_text'>" + fromUserString + message.text + "</div>" +
                "</div>" +
            "</div>" +
        "</div>"
    )

$（'#聊天列表'）。追加(
"" +
"" +
"" +
"" +
"" +
"" +
“”+标题+“”+
“”+fromUserString+message.text+“”+
"" +
"" +
""
)

今天，我在jQuery上也尝试了同样的方法，但结果更糟。理解起来要复杂得多

    $('#chatlist').append(
        $('<div />').addClass('chatlist_cell').append(
            $('<div />').addClass('chatlist_cell_inner').append(
                $('<div />').css('float', 'left').append(
                    $('<img />').addClass('chatlist_avatar').attr('src','/images/ui/user_placeholder.svg')
                )
            ).append(
                $('<div />').css({'float': 'left', 'padding-left': '10px'}).append(
                    $('<div />').addClass('chatlist_title').text(title),
                    $('<div />').addClass('chatlist_text').text(message.text)
                )
            )
        )
    )

$（'#聊天列表'）。追加(
$（''）.addClass（'chatlist_cell'）。追加(
$（''）.addClass（'chatlist\u cell\u inner'）。追加(
$（''）.css（'float'，'left'）。追加(
$（''）.css（{'float'：'left'，'padding left'：'10px'）。追加(
$（''）.addClass（'chatlist_title'）。文本（title），
$（''）.addClass（'chatlist_text'）.text（message.text）
)
)
)
)

---

在JS/jQuery中有更好的方法吗？如果没有，还有其他工具吗？

如果您不愿意/无法使用成熟的JS框架（没有问题）您可能需要查看下划线/这是一种非常轻量级的方法，它可以避免您编写代码将dom修改为任何可能的状态。您只需概述数据的呈现方式，然后在数据发生更改时重新呈现数据。请注意，这不应用于“web app”类型的应用，因为JS框架更适合该工作（React/Flow、Angular、Backbone、Ember等）但是对于为小的或很少改变的接口生成HTML，lodash非常好

例如：

从您的代码：

<script id="myTemplate" type="text/template"> 
    <div class='chatlist_cell'>
        <div class='chatlist_cell_inner'>
            <div style='float: left;'>
                <img class='chatlist_avatar' src='/images/ui/user_placeholder.svg'>
            </div>
            <div style='float: left; padding-left: 10px;'>
                <div class='chatlist_title'><%=title%></div>
                <div class='chatlist_text'><%=fromUserString%> <%=message.text%></div>
            </div>
        </div>
    </div>
</script>
<script>
    $(function() {
        var myTemplate = _.template($('#myTemplate').html());
        function addNewMessage(title, message, fromUserString) {
            var html = myTemplate({
                title: title,
                message: message,
                fromUserString: fromUserString
            });
            $('#chatlist').append(html);
        }
        addNewMessage("myTitle", {text: "myText"}, "JoshStrange:");
    });

</script>

$（函数（）{
var myTemplate=35;.template（$（'#myTemplate'）.html（）；
函数addNewMessage（标题、消息、fromUserString）{
var html=myTemplate({
标题:标题,，
讯息:讯息,，
fromUserString:fromUserString
});
$（“#聊天列表”）.append（html）；
}
addNewMessage（“myTitle”，{text:“myText”}，JoshStrange:”）；
});

---

，@CD..这在IE或移动浏览器AFAICT上不受支持。