What's the proper way to dynamically insert 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?

Possible duplicate of [Inserting HTML elements with JavaScript](http://stackoverflow.com/questions/814564/inserting-html-elements-with-javascript) — devlin carnate, Mar 28 '17 at 21:15
You could do either of the 2 things. But the `HTML` on the fly using `jQuery` and append the structured code into the container. Or use a templating library to which you can pass data which would be replaced when compiling. — Sushanth --, Mar 28 '17 at 21:15
@Sushanth I did a search for a javascript templating library and found exactly what I was looking for (mustache.js). Thank you! — Ky Stella, Mar 28 '17 at 21:24
@KyStella Mustache is good. Handlebars is great too. Cheers :) — Sushanth --, Mar 28 '17 at 21:41

score 0 · Accepted Answer · answered Mar 29 '17 at 19:44

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

What's the proper way to dynamically insert HTML?

1 Answers1