how to have a nested div with javascript

Question

i have a results object that include some data like Creation_date, approval_date,.... . i put the results in loop in javascript and create nested div. but when i debug it , those div aren't nested,unfortunately each one closed after created. any help?

    var Item=document.getElementById('myItems');
    Item.innerHTML="";
    for(var i=0;i<myItem.results.length;i++){

        Item.innerHTML +='<div class="row">';
            Item.innerHTML +='<div class="col-md-12">';
                Item.innerHTML +='<img src="'+myItem.results[i].images+'"/>';
            Item.innerHTML +='</div>';
        Item.innerHTML +='</div>';
        Item.innerHTML +='<div class="row">';
            Item.innerHTML +='<div class="col-md-4">';
                Item.innerHTML +='Created on:'+myItem.results[i].creation_date;
            Item.innerHTML +='</div>';
            Item.innerHTML +='<div class="col-md-4">';
                Item.innerHTML +='incident_date:'+myItem.results[i].item_date;
            Item.innerHTML +='</div>';
            Item.innerHTML += '<div class="col-md-4">';
                Item.innerHTML +='approval_date:'+myItem.results[i].approved_date;
            Item.innerHTML +='</div>';
        Item.innerHTML +='</div>';
    }

Try using appendChild rather than innerHTML.

BPS
– BPS

2016-02-09 17:07:49 +00:00
Commented Feb 9, 2016 at 17:07 — BPS
– BPS, Commented Feb 9, 2016 at 17:07

Marc B · Accepted Answer · 2016-02-09 16:02:51Z

1

You're assigning to .innerHTML. Every time you do that, the dom is rebuild. JS and the DOM engine have no idea you're going to be adding more stuff again, so it tries to rebuild the DOM tree with VALID html, fixing any errors you introduced with the one line added.

e.g.

item.innerHTML = '<div>';

actually produces <div></div> in the tree, because you're not allowed to build an invalid tree.

Don't do repeated innerHTML assignment. Build your html in a string, then assign the string ONCE

e.g.

foo = '<div>';
foo += 'hi mom!';
foo += '</div>';

Item.innerHTML += foo;

Not only does this let you build up your html properly, it's also more efficient, and only rebuilds the tree ONCE, instead of each time you modified innerhtml.

answered Feb 9, 2016 at 16:02

Marc B

362k44 gold badges433 silver badges508 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vicky Gonsalves · Accepted Answer · 2016-02-09 16:02:07Z

Put all html in buffer and insert it after for loop.

Since you are directly assigning innerHTML DOM is contineuosly re-building in for loop.

var Item = document.getElementById('myItems');
var buffer = '';
for (var i = 0; i < myItem.results.length; i++) {

  buffer += '<div class="row">';
  buffer += '<div class="col-md-12">';
  buffer += '<img src="' + myItem.results[i].images + '"/>';
  buffer += '</div>';
  buffer += '</div>';
  buffer += '<div class="row">';
  buffer += '<div class="col-md-4">';
  buffer += 'Created on:' + myItem.results[i].creation_date;
  buffer += '</div>';
  buffer += '<div class="col-md-4">';
  buffer += 'incident_date:' + myItem.results[i].item_date;
  buffer += '</div>';
  buffer += '<div class="col-md-4">';
  buffer += 'approval_date:' + myItem.results[i].approved_date;
  buffer += '</div>';
  buffer += '</div>';
}

Item.innerHTML = buffer;

Gavin Thomas · Accepted Answer · 2016-02-09 16:06:53Z

0

I don't see why you just don't use jQuery .append() http://api.jquery.com/append/

answered Feb 9, 2016 at 16:06

Gavin Thomas

1,2067 silver badges10 bronze badges

2 Comments

Vicky Gonsalves Over a year ago

jQuery isn't javascript?

Gavin Thomas Over a year ago

I know that - but it makes for a much simpler solution to what he's trying to achieve than the way he's currently doing it.

Collectives™ on Stack Overflow

how to have a nested div with javascript

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related