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

Question

该函数使用该slice()方法在动态创建的 div 中单击时显示八个元素。我怎样才能给每个人一个唯一的iddiv？你的建议对我很有帮助。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 container

container = 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