在循环中创建内部 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>

---

正确方法

现在每次迭代都有一个新的 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>