루프 내에서 내부 div 만들기

Question

누군가가 내게 div를 추가하는 방법을 설명 할 수 있습니까? 현재는 모든 것을 연결하고 모두 엉망으로 보입니다. 나는 각 여행은 별도의 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>

이제 모든에 대한 그 하나가 다른 상자하고하지 않도록주의, 새로운 사업부가 반복. 내가 볼

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>