动态插入HTML的正确方法是什么？

Question

我有一个像这样的聊天框（简化版）：

        <!-- Chat Container -->
        <div id="chat-window">
            <div class="message-container">
                <!-- Begin messages -->

                <!-- End messages -->
            </div>
        </div>

我有一个函数，可以附加存储在javascript中的html静态块

表示代码块：

        var messageTemplate =
        '<!-- Begin message -->' +
        '<div id="message">' +
        '<div id="message-name">' + name + '</div>' +
        '<div id="message-division" class="badge">' + division + '</div>' +
        '<div id="message-time"><i class="fa fa-clock-o" aria-hidden="true"></i><abbr class="timeago" title="' + time + '">' + time + ' </abbr> </div>' +
        '<div id="message-content">' +
        '<div id="message-tag" class="label label-primary">' + tag + '</div>' +
        '<div id="message-text">' +
        text +
        '</div>' +
        '</div>' +
        '<hr>' +
        '</div>' +
        '<!-- End message -->';

jQuery将此附加到我的messages-container

但是我觉得有一个更清洁的解决方案可以做到这一点，但我一直找不到。

有人可以指出我向网页中插入新对象的正确方向，而不必在引用的javascript中预先定义这些对象吗？

Answer 1

正如其他人所建议的那样，您可以寻找一个更正式的模板引擎，但是您的用例看起来非常简单。 您可以只使用诸如createElement（），attr（）和text（）之类的JQuery方法来实现此功能。 这是用newDiv函数包装的方法，因为这似乎是您需要的主要内容。 它为newDiv（）的第二个参数添加您传入的id并创建一个div元素作为子元素。 除了添加文本外，所有其他操作都可以链接到newDiv函数结果上。

var name = "foo";
var division = "bar";

// this is your parent element
var message = newDiv("message",$(".message-container"));

// here are your children, add as many as you want:
newDiv("message-name",message).text(name);
newDiv("message-division",message).text(division);

function newDiv(id,parent) {
    var element = document.createElement("div");
    $(element).attr("id",id);
    parent.append(element);
    return $(element);
}