如何为动态创建的每个子div提供唯一ID？

Question

该函数使用该slice()方法在动态创建的div中单击时显示八个元素。我怎样才能给每个人一个唯一的身份证div？你的建议对我很有帮助。var words = [40];var count = 0;var x = "";function nextElems() {     var newArray = words.slice(count, count + 8);     for (i = 0; i < newArray.length; i++) {         x += '<div class=box>' + newArray[i] + '</div>';         document.getElementById('container').innerHTML = x;     }     x = "";     count += 8;}我试过这个，但它不起作用：var mainDiv = document.getElementById('container');var first = mainDiv.getElementsByTagName('div')[0];first.id = 'one';

Answer 1

您可以使用在文本字符串中指定ID。

以下是您可以采取的其他一些措施来改进此代码：

1. 将getElementById移到循环外部

2. 使用js方法而不是字符串连接

像这样（未经测试）：

// get the containercontainer = document.getElementById('container');for (i = 0; i < newArray.length; i++){
  // create a div
  var div = document.createElement('div');
  // add attributes
  div.setAttribute("id", "box-" + i);
  div.setAttribute("class", "box");
  // create text node
  var textnode = document.createTextNode("This is div #" + i);
  // add text to div
  div.appendChild(textnode); 
  // append to container
  container.appendChild(div); }

Answer 2

你可以在for循环中直接进行迭代：

for (i = 0; i < newArray.length; i++){
    x += '<div id="box-' + i + '"> class="box">' + newArray[i] + '</div>';
    document.getElementById('container').innerHTML = x;}

Answer 3

如何在创建时赋予它id？也把这样class=box的引号放在- > class="box"。

并且在for循环之后只添加整个div构造一次。因为现在你基本上多次覆盖整个事情。

var words = [40];var count = 0;var x = "";function nextElems() {
    var newArray = words.slice(count, count + 8);
    for (i = 0; i < newArray.length; i++)
    {
        // Change class and add custom id
        x += '<div class="box" id="box-'+i+'">' + newArray[i] + '</div>';
    }
    document.getElementById('container').innerHTML = x; // Add divs after for loop
    x = "";
    count += 8;}

现在每个框都有一个唯一的id，从box-0，box-1，...到box-n