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

Question

I have a chatbox like so (simplified version):

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

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

I have a function that appends a static block of html stored in javascript

Said block of code:

        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 appends this to my messages-container

However I feel that there's a much cleaner solution to do this, which I haven't been able to find.

Can someone point me to the right direction for inserting new objects into web pages without having to pre-define these objects in quoted javascript?

Answer 1

As others have suggested you can look for a more formal templating engine, but your use-case looks pretty simple. You could just use JQuery methods like createElement(), attr(), and text() to do this functionally. Here is this approach wrapped with a newDiv function since that seems to be the major thing you need here. It adds an id you pass in and creates a div element as a child to the second parameter of newDiv(). Anything beyond that like adding text can be chained onto the newDiv function result.

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);
}