在循环中创建内部div
在循环中创建内部div
提问于 2016-06-28 10:13:37
有人能给我解释一下我是如何附加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;
}); 回答 1
Stack Overflow用户
回答已采纳
发布于 2016-06-28 10:22:17
您正在重用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38073363
复制相关文章
相似问题
腾讯云开发者
