尝试使用 for 循环在 html dom 中创建多个 div

Question

您好，我正在尝试在 forloop 中创建多个 div，但结果只有 1 个 div。我做错了什么？

代码：

for (var i = 0; i < $hubbe.colors.length; i++) {
$hubbe.pallet = document.createElement('DIV');
$hubbe.pallet.setAttribute('class', 'pallet');
$hubbe.toolbarLeft.appendChild($hubbe.pallet);
$hubbe.pallet.style.backgroundColor = $hubbe.colors[i];
Object.assign($hubbe.pallet.style, {
width: '40px',
height: '40px',
border: '2px solid #2c3e50',
margin: '20px 0 0 5px',
disaply: 'block',
cursor: 'pointer',
});
}

Answer 1

根据您告诉我的情况，我认为这将解决您的问题。它将$hubbe.pallet 更改为一个数组，因此您的其余代码也可以正常工作：

$hubbe.pallet = []; //declares the array

for (var i = 0; i < $hubbe.colors.length; i++) {
    var temp = document.createElement('DIV'); //create temp variable to work with

    temp.setAttribute('class', 'pallet');
    temp.style.backgroundColor = $hubbe.colors[i];

    Object.assign(temp.style, {
        width: '40px',
        height: '40px',
        border: '2px solid #2c3e50',
        margin: '20px 0 0 5px',
        disaply: 'block',
        cursor: 'pointer',
    });

    $hubbe.toolbarLeft.appendChild(temp);

    $hubbe.pallet[i] = temp; //adds the object to the array
}