Alternative solutions to creating HTML content dynamically in Javascript

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/

You can try some front end framework. eg: AngularJS (As mentioned in previous comment) It has built in template engine. (As mentioned in comment ) so your code would like following if you use angular

<ul>
  <li ng-repeat="user in users">{{user.name}}</li>
</ul>

and your json might be

{
  "users":[
     {
        "name":"jack",
        "age":18
     },
     {
        "name":"jimmy",
        "age":19
     }
  ]
}

the html user see will be

<ul>
  <li>jack</li>
  <li>jimmy</li>
</ul>

I didn't write angular's controller code,so the above code is just for demonstration, you can take a look at its doc and tutorials.

Angular is a MV* front end framework, it is really useful when you have a lot of data to display in the front end.(but too many data will cause performance issue because it use two-way data-binding, try bindonce)

If you don't want a framework, you can try mustache

You can use a templating solution like underscore templates, Handlebars, or (the best) JADE. Each of these can be used with a larger framework like angular or ember, but also work as standalone templating solutions.

Since you're using bootstrap, you're also using jQuery.

With jQuery, you can add elements, update their content and add classes like this:

var $li = $("<li>") // create the li element
    .text("My Text") // add a text node
    .addClass("class1 class2 class3") // add some classes
    .appendTo($("ul#myList")); // insert into your ul

the following is also allowed if you prefer a one-liner:

var $li = $("<li class='class1 class2 class3'>My Text</li>")
    .appendTo($("ul#myList"));

both of the above take this:

<ul id="myList"></ul>

and turn it into this:

<ul id="myList"><li class='class1 class2 class3'>My Text</li></ul>

Edit:

It's been a while, but I found Gatsy pretty easy to get up and running with. I've used it for a couple of projects.

Angular is another option, depending on how complex the site is (supported by google).

Ember is also a great option.

Depending on your skill sets, and the type of site this is, PHP could be an easy alternative for you as well.