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函数包装的方法，因为这似乎是你需要的主要内容。它会添加一个传入的id，并将new元素作为子元素创建到newDiv（）的第二个参数。除了添加文本之外的任何内容都可以链接到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);
}

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

1 个答案: