Alternative solutions to creating HTML content dynamically in Javascript

Question

I am working on a web project. (Absolutely no previous experience). This project requires retrieving lot of content from the server dynamically(Like on the click of button). Now, the problem is, I have to display the content in some neat, formatted way. Like, collapsible lists, hyperlinks etc. I am currently using JavaScript for this purpose. Like this:

li = document.createElement("li");
li.innerHTML = "some_content";

I also need to add appropriate classes to those dynamically created elements in JavaScript as per the requirements of Bootstrap. But the code really looks very messy now. Are there any alternative solutions for avoiding all the dynamic creation of elements in JS, formatting etc.?

Answer 1

Seems like a perfect scenario for a knockoutJS solution. I am just posting a sample code here from their live example.

you just create the template like this -

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>

(notice the bindings in data-bind)

and create the view model and then apply it -

// Here's my data model
var ViewModel = function(first, last) {
    this.firstName = ko.observable(first);
    this.lastName = ko.observable(last);

    this.fullName = ko.pureComputed(function() {
        // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
        return this.firstName() + " " + this.lastName();
    }, this);
};

ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work

and you are good to go with this output, only a matter of minutes.

I created a Survey Builder page with it, the most important part is knockout is fast and also supports all kinds of js libraries to work with like jQuery, AngularJS, etc. You will never need to worry about rendering ui, just get/set with data.

Try it out here - http://jsfiddle.net/rniemeyer/LkqTU/