Javascript 通过迭代，使用数组中的字符串动态设置变量

我被卡住了。我需要创建4个新元素，它们将具有相同的类和不同的ID。关键是我不想重复代码。。。但我的循环不起作用

我花了2个小时试图克服这个挑战，已经在谷歌做了很多研究，试图通过使用console.log和打印元素来了解迭代中发生了什么。然后，我需要打印console.dir以查看创建的[object htmldevelment]的属性

代码如下所示：

columnsArray = ["first", "second", "third", "fourth"]
for (var i = 0; i < columnsArray.length; i++ ) {
    let name = columnsArray[i]
    name = document.createElement("div");
    name.className = "container"
    name.setAttribute("id", name.name)
    document.querySelector("#board" + boardId).appendChild(name);
}

name.setAttribute("id", columnsArray[i])

---

提前感谢您的帮助

您的循环工作正常，只是无法以您认为的方式访问名称

您必须按如下方式设置id：

columnsArray = ["first", "second", "third", "fourth"]
for (var i = 0; i < columnsArray.length; i++ ) {
    let name = columnsArray[i]
    name = document.createElement("div");
    name.className = "container"
    name.setAttribute("id", name.name)
    document.querySelector("#board" + boardId).appendChild(name);
}

name.setAttribute("id", columnsArray[i])

name.name不存在

columnsArray=[第一、第二、第三、第四]； boardId=1； 对于var i=0；i通过将columnsArray创建为元素，您正在覆盖循环中columnsArray的ID值

在新变量中创建元素：

columnsArray = ["first", "second", "third", "fourth"]

for (var i = 0; i < columnsArray.length; i++ ) {
    // get the ID value from the array
    let name = columnsArray[i];
    // create a new element
    let element = document.createElement("div");
    // set its name
    element.className = "container"
    // set the ID value to columnsArray[i] (name)
    element.setAttribute("id", name)
    // append to board
    document.querySelector("#board" + boardId).appendChild(element);
}

使用name.setAttributeid，columnsArray[i]代替name.setAttributeid，name.name

使用之后

name.innerHTML = columnsArray[i]; //Replace it for some info or element
document.querySelector("#board" + boardId).appendChild(name);

使用以下命令：

columnsArray = ["first", "second", "third", "fourth"]

for (i in columnsArray) {
  let name = columnsArray[i]
  name = document.createElement("div");
  name.className = "container"
  name.setAttribute("id",columnsArray[i])
  document.getElementById('boardId').appendChild(name);
}

---

为什么要将.setAttribute方法设置为字符串？我很接近，但到目前为止。。。我不知道为什么我如此努力地在所有地方都使用相同的变量名。谢谢，我真丢脸：pI在我不顾一切地试图从name中获取更多信息后复制了代码，这就是为什么会有name.name，这当然毫无意义；谢谢你的努力