javascript - 带数组的一键多项功能

Question

我正在尝试创建这段代码，其中将一个元素插入数组中，显示并添加一个样式，该样式为它们提供了随机的十六进制颜色。我得到了十六进制颜色并部分完成了对数组的插入，但我似乎无法添加样式也无法显示 div...到目前为止，这是我的代码:

JS

var colorBg = '#' + (Math.random() * 0xFFFFFF << 0).toString(16)
var elements = []
var el = '<div class="element bg"></div>'

document.getElementById("addEl").onclick = () => {
    elements.push(el)
    //console.log(elements)

    for (i = 0; i < elements.length; i++) {

        console.log(elements[i])
        document.write(elements[i])
        //elements[i].style.backgroundColor = colorBg
    }

}

HTML

<div class="container">
<div class="element bg"></div>
</div>
<input type="button" value="Add Block" id="addEl"/>

CSS

html, body{
    height:80%;
}

.container{
    width:100%;
    height:100%;
}

.element{
    width:100px !important;
    height:100px;
}

Answer 1

不要使用document.write()。相反，请使用 document.createElement() 创建 HTML 元素，然后将它们附加到其他元素。

您还可以在创建元素时设置它们的颜色并附加它们一次。无需每次单击按钮时都对所有元素执行所有这些操作。

如果您想在每次按下按钮时随机化每个元素的颜色，您可以选择所有元素，迭代它们，然后以这种方式随机化它们的颜色。

document.getElementById("addEl").onclick = () => {
    var el = document.createElement("div");
    el.className = ["element bg"];
    var colorBg = '#' + (Math.random() * 0xFFFFFF << 0).toString(16)
    el.style.backgroundColor = colorBg
    document.getElementById("container").append(el)

}

html, body{
    height:80%;
}

#container{
}

.element{
    width:100px !important;
    height:100px;
    margin:10px;
    border:1px solid black;
}

<div id="container">
</div>
<input type="button" value="Add Block" id="addEl"/>