ループ内で内部divを作成する

Question

誰かが私にdivを追加する方法を説明することはできますか？現在、すべてを連結するだけで、すべてが混乱のように見えます。私は、各旅行はあなたがinnerDivの同じ参照を再利用している

 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

divs別々の内側になりたいです。旅行ごとに異なる新しいdivを作成する必要があります。

移動：var innerDiv = document.createElement('div');をforループに入れます。以下

チェック例：

あなたのコード：

注innerDivは、あなたが見ることができる青境界線と1つのボックスだけを持っています。

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要素があるイテレーション、そこに別のボックスがあり、1つだけでなくことに注意してください。私が見

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>