What is the most efficient way to create nested div's in Javascript?

Question

Essentially, I'm trying to recreate this code:

<div class="row" style="-moz-border-radius: 18px 18px 18px 18px; -webkit-border-radius: 18px;  border-radius: 18px 18px 18px 18px; background-color:white; margin-bottom:20px">
    <div class="col-lg-12">
        <div class="row" style="margin-bottom:10px;">
            <div class="col-xs-6">
                <center><font size="6">Content</font></center>
            </div>
            <div class="col-xs-6">
                <center>Content</center>
            </div>
        </div>
        <div class="row" style="margin-bottom:10px;">
            <div class=" col-xs-4" style="text-align: right;">
                <font size="3"><b>Content</b></font>
            </div>
            <div class="col-xs-8">
                <font size="3">Content</font>
            </div>
        </div>
        <div class="row" style="margin-bottom:10px;">
            <div class="col-xs-4" style="text-align: right;">
                <font size="3"><b>Content</b></font>
            </div>
            <div class="col-xs-8">
                <font size="3">Content</font>
            </div>
        </div>
        <div class="row" style="margin-bottom:10px;">
            <div class="col-xs-4" style="text-align: right;">
                <font size="3"><b>Content</b></font>
            </div>
            <div class="col-xs-8">
                More Content
            </div>
        </div>
        <button class="btn btn-primary btn-lg btn-block" style="margin-bottom:15px">Launch GPS!</button>
    </div>
</div>

to generate every time I enter more information in that gets filled into the places above marked "content".

My problem isn't writing the javascript to append the data as much as it is creating a way to generate the above code each time I enter in data.

My thought about how to go about this problem was creating individual variables like so: (this is all inside of a function that gets called to return a finished var with all of these supposed variables strung together in a chain of appendChild functions)

var divDisplay = document.createElement('div');
divDisplay.className = 'row';
description.setAttribute("style", "-moz-border-radius: 18px 18px 18px 18px; -webkit-border-radius: 18px;  border-radius: 18px 18px 18px 18px; background-color:white; margin-bottom:20px;");

..then do appendChild() calls for further implementation.. like so:

var divDisplay2 = document.createElement('div');
divDisplay2.className = 'col-lg-12';
divDisplay.appendChild(
    divDisplay.appendChild(divDisplay2)
);

But ultimately I get errors, trying to place more content into those append child's.

Is there a better way? Faster way? Could you should me what you would do to code this?

Answer 1

There are plenty of ways to skin this cat but depending on how much you are doing it creating a hidden template and inserting that is probably the easiest option. Just add the hidden block to your DOM

<div id="template" class="hidden">
    <div class="row" style="margin-bottom:10px;">
        <div class="col-xs-4" style="text-align: right;">
            <font class="contentHeading" size="3"><b>{ContentHeading}</a></font>
        </div>
    <div class="col-xs-8">
        <font class="contentText" size="3">{ContentText}</font>
    </div>
</div>

Then pull the HTML out of the template and insert your text

var parentDiv = document.getElementById('someDiv');
var myTemplate = document.getElementById('template');
var newRowHtml = myTemplate.innerHTML.replace('{ContentHeading}', heading).replace('{ContentText}', text);
document.getElementById('someDiv').innerHTML += newRowHtml;

Note that using the string replace function may not be your best option if you have a large template.

Alternatively if you are going to be inserting a lot of content you may be better off using a templating library. There are plenty to choose from but Handlebars code for example would look something like this.

var templateSource   = document.getElementById("row-template").innerHTML;
var template = Handlebars.compile(templateSource);

Then when you want to insert a row just use

var newRowHtml = template({
    heading: heading,
    text: text
}); 
document.getElementById('someDiv').innerHTML += newRowHtml;