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>

在循环中创建内部div

1 个答案: