Создайте внутренние divs в цикле

Question

Может кто-нибудь объяснить мне, как я делаю добавление divs, в настоящее время он просто конкатенирует все, и все это выглядит как беспорядок. Я хочу, чтобы каждая поездка быть внутри отдельной divs

 var origin = ' '; 
     var destination = ' '; 
     var distance = ' '; 
     var oneConcatedTrip = ' '; 

     var outerDiv = document.getElementById('demo'); 
     var innerDiv = document.createElement('div'); 
     var i = 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; 
    }); 

Answer 1

Вы повторно использовать ту же ссылку на innerDiv. Для каждой поездки вам нужно создать новый новый div.

Перемещение: var innerDiv = document.createElement('div'); в цикл for.

Проверьте пример ниже:

Ваш код:

Обратите внимание на innerDiv имеет синий границу и его только один ящик, который вы можете видеть.

var outerDiv = document.getElementById('demo'); 
 
var innerDiv = document.createElement('div'); 
 
for (var i = 1; i < 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>

---

правильный путь

Теперь, для каждой итерации есть новый DIV, обратите внимание, что существуют различные коробки, а не только один.

var outerDiv = document.getElementById('demo'); 
 
for (var i = 1; i < 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>