javascript - appedChild() 覆盖 div

Question

我有一个带有嵌套数组的数组，它将在循环中从数组中的项目将 div 添加到 DOM。当它进入嵌套循环时，它会不断地用嵌套数组中的最后一项覆盖前一个 div。我不明白为什么会发生这种情况。

这是我的代码:

let beans = ["1", "2", "3", ["4", "5", "6"]];

//Loop over the beans array
for (var i = 0; i < beans.length; i++) {

    // create div elements


    // check to see if it is string 
    if (typeof beans[i] === 'string') {
        let divs = document.createElement('div');
        divs.textContent = beans[i];
        document.body.appendChild(divs);

        // console.log(beans[i]);
    } else {
        let divs = document.createElement('div');
        divs.textContent = "These are the array items:";
        document.body.appendChild(divs);
        for (var j = 0; j < beans[i].length; j++) {

            divs.textContent = beans[i][j];
            document.body.appendChild(divs);
            console.log(i + " " + j + " " + beans[i][j]);
        }
    }
}

我最终得到的是 4 个 div:1236

因此嵌套数组中的 div 会覆盖自身。

我对 JS 比较陌生，希望得到任何帮助。

Answer 1

您的 else 仅创建一个新元素 - 请注意，它在循环之前调用 document.createElement('div') 一次？然后，您覆盖该 div 的内容并调用 document.body.appendChild(divs)，但 .appendChild() 不会创建其他副本，它会移动 现有元素。

您需要在 else 的 for 循环内添加对 document.createElement('div') 的另一个调用。

let beans = ["1", "2", "3", ["4", "5", "6"]];

//Loop over the beans array
for (var i = 0; i < beans.length; i++) {
    // create div elements
    // check to see if it is string 
    if (typeof beans[i] === 'string') {
        let divs = document.createElement('div');
        divs.textContent = beans[i];
        document.body.appendChild(divs);
    } else {
        let divs = document.createElement('div');
        divs.textContent = "These are the array items:";
        document.body.appendChild(divs);
        for (var j = 0; j < beans[i].length; j++) {
            divs = document.createElement('div');        // <--- ADD THIS
            divs.textContent = beans[i][j];
            document.body.appendChild(divs);
            console.log(i + " " + j + " " + beans[i][j]);
        }
    }
}