为动态创建的元素赋予不同的 ID答案

【问题标题】：Giving different ID's to dynamically created elements为动态创建的元素赋予不同的 ID
【发布时间】：2018-07-12 11:06:25
【问题描述】：

所以，我有一个循环 10 次的函数，以创建 10 个元素。我想要完成的是：我想给那些div Elements 不同的ids，这样我可以在需要时单独联系它们。

function addDay() {  
    for(k = 0; k < 10; k++){
        let div = document.createElement("div");
        div.style.background = "red"
        div.style.color = "white"
        div.style.width = "40px"
        div.style.height = "20px"
        div.style.margin = "0.5px"
        div.style.textAlign = "center"
        div.style.borderRadius = "6px"
        div.setAttribute("class", "studentGrades");
        div.setAttribute("id", "sgId")

        div.setAttribute("onclick", "averageFunc(this, Number(prompt('Please, enter number here')))");

        div.innerHTML = "0"

        document.querySelector("#container3").appendChild(div)
    }
}

所以我想得到类似的东西，

第一个 div = div id="sgId1"
第二个 div = div id="sgId2"
第三个 div = div id="sgId3" 等

注意：我只是从编码本身开始，目前已经进入 vanilla JS 的第三周。所以我不能使用任何库/框架

【问题讨论】：

只需使用变量k 即.setAttribute("id", "sgId" + (k+1))

标签： javascript loops dom

【解决方案1】：

使用循环中的 k 值来指定每个元素。

div.setAttribute("id","sgId"+k);

【讨论】：

【解决方案2】：

使用这个表达式：

div.id = "sgId" + (k + 1);

演示

var total = 0;
var c101 = document.querySelector("#class101");
var gradeAvg = document.querySelector("#gradeAvg");
var list = document.createElement("ol");

for (let k = 0; k < 10; k++) {
  var li = document.createElement("li");
  li.classList.add("grade");
  li.id = "sgId" + (k + 1);
  li.textContent = "0";
  li.addEventListener('click', enterGrade);
  list.appendChild(li);
}

c101.appendChild(list);

function enterGrade(e) {
  var num = Number(prompt(`Please, enter number here`));
  e.target.textContent = num;
  var total = avg(num);
  gradeAvg.textContent = total;
}

function avg(num) {
  var sum = total += num;
  return sum / 10;
}

.grade {
  background: red;
  color: white;
  width: 40px;
  height: 20px;
  margin: 0.5px;
  text-align: center;
  border-radius: 6px;
}

<h4>Student Grades</h4>
<section id='class101'></section>
<label>Grade Average: </label><output id='gradeAvg'></output>

【讨论】：