Блог

У меня есть массив с вложенным массивом, который будет добавлять divs в 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 divs:
1
2
3
6

таким образом, divs во вложенном массиве перезаписывают сами себя.

Я относительно новичок в JS и был бы признателен за любую помощь в этом.

Ваш else создает только один новый элемент — обратите внимание, что он вызывается document.createElement('div') ровно один раз, перед циклом? Затем вы перезаписываете содержимое и вызываете этот div document.body.appendChild(divs) , но .appendChild() не создаете дополнительные копии, а перемещаете существующие элементы.

Вам нужно добавить еще один вызов document.createElement('div') внутри for цикла в else .

 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]);
        }
    }
}