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?

elvey · Accepted Answer · 2015-11-03 09:00:46Z

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;

Kristijan Iliev · Accepted Answer · 2015-11-03 07:36:02Z

1

Using pure javascript, you can try with innerHTML like this:

document.getElementById("parent").onclick=
function appendEl(){
    var parent = document.getElementById("parent");
    parent.innerHTML += "<div class='yourClass'> child </div>";
}

#parent{
    border: 1px solid blue;
}

<div id="parent" > click to add child in parent </div>

edited Nov 3, 2015 at 7:36

answered Nov 3, 2015 at 7:26

Kristijan Iliev

5,01710 gold badges32 silver badges52 bronze badges

Comments

px5x2 · Accepted Answer · 2015-11-03 07:50:37Z

1

I would hide the main div element somewhere in html (very like a template), and when user triggers a change, the container div can be read/reused by any selector and put into desired position by $(desiredPlace).html(container). That soution does not result in recreation of nested divs actually.

with pure js: http://jsfiddle.net/c2jghmvk/

edited Nov 3, 2015 at 7:50

answered Nov 3, 2015 at 7:20

px5x2

1,5752 gold badges17 silver badges31 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related