javascript - Create inner divs within a loop -

can explain me how appending divs concats , looks mess. want each trip inside separate divs

        var origin = ' ';         var destination = ' ';         var distance = ' ';         var oneconcatedtrip = ' ';          var outerdiv = document.getelementbyid('demo');         var innerdiv = document.createelement('div');         var = 1;          var query = firebase.database().ref('users/' + uid +'/waypoints/work/2016/06').orderbykey();                      query.once("value")           .then(function(snapshot) {             snapshot.foreach(function(childsnapshot) {              var key = childsnapshot.key;             var childdata = childsnapshot.val();              origin = childsnapshot.val().origin;                 destination = childsnapshot.val().destination;               distance = childsnapshot.val().distance;              innerdiv.classname = 'block-' + i++;             outerdiv.appendchild(innerdiv);              oneconcatedtrip =  origin + '  ' + destination + '  ' + distance;                innerdiv.innerhtml += oneconcatedtrip;          });              outerdiv.textcontent = innerdiv.innerhtml;       });  

you reusing same reference of innerdiv. need create different new div every trip.

move : var innerdiv = document.createelement('div'); loop.

check example below :

your code :

note innerdiv has blue border , 1 box can see.

var outerdiv = document.getelementbyid('demo');  var innerdiv = document.createelement('div');  (var = 1; < 5; i++) {    innerdiv.classname = 'block';    outerdiv.appendchild(innerdiv);      var oneconcatedtrip = 'origin   destination   distance';    innerdiv.innerhtml += oneconcatedtrip;  }

.block {    border: 2px blue solid;  }

<div id="demo">    </div>

---

correct way

now every iteration there new div, note there different boxes , not one.

var outerdiv = document.getelementbyid('demo');  (var = 1; < 5; i++) {    var innerdiv = document.createelement('div');    innerdiv.classname = 'block';    outerdiv.appendchild(innerdiv);      var oneconcatedtrip = 'origin   destination   distance';    innerdiv.innerhtml += oneconcatedtrip;  }

.block {    border: 2px blue solid;  }

<div id="demo">    </div>