Question

我试图让我的game2元素有两个包含gameTwo数组内容的子div，但是这个脚本中发生的事情是它第一次遍历循环时，它会创建我想要的子div，但第二次创建了孩子的孩子。有人可以建议我如何编辑这个以便div是彼此的兄弟姐妹吗？

var gameTwo = ['Kansas', 'Villanova']

var gameTwoText = '';
    for (i = 0; i < gameTwo.length; i++) {
        gameTwoText += "<div>" + gameTwo[i];
    }
var secondGame = document.getElementById('game2').innerHTML = gameTwoText;

Answer 1

每个div都需要一个结束标记 - 尝试：

gameTwoText += "<div>" + gameTwo[i] + "</div>";

如果没有</div>，您永远不会关闭第一个div，因此每个后续版本都会创建为最后一个孩子。

Answer 2

正如其他人所说的那样，请确保在循环中关闭DIV标记，但是您始终可以通过DOM来构建元素的旧方式：

var secondGame = document.getElementById('game2');
var gameTwo = ['Kansas', 'Villanova'];
var div = null;
for (var i = 0, len = gameTwo.length; i < len; i++) {
    div = document.createElement('div');
    div.appendChild(document.createTextNode(gameTwo[i]));
    secondGame.appendChild(div);
}

for循环迭代数组并创建彼此兄弟的div

2 个答案: