如何为动态创建的每个子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。以下是您可以采取的其他一些措施来改进此代码：将getElementById移到循环外部使用js方法而不是字符串连接像这样（未经测试）：//&nbsp;get&nbsp;the&nbsp;containercontainer&nbsp;=&nbsp;document.getElementById('container');for&nbsp;(i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;newArray.length;&nbsp;i++){ &nbsp;&nbsp;//&nbsp;create&nbsp;a&nbsp;div &nbsp;&nbsp;var&nbsp;div&nbsp;=&nbsp;document.createElement('div'); &nbsp;&nbsp;//&nbsp;add&nbsp;attributes &nbsp;&nbsp;div.setAttribute("id",&nbsp;"box-"&nbsp;+&nbsp;i); &nbsp;&nbsp;div.setAttribute("class",&nbsp;"box"); &nbsp;&nbsp;//&nbsp;create&nbsp;text&nbsp;node &nbsp;&nbsp;var&nbsp;textnode&nbsp;=&nbsp;document.createTextNode("This&nbsp;is&nbsp;div&nbsp;#"&nbsp;+&nbsp;i); &nbsp;&nbsp;//&nbsp;add&nbsp;text&nbsp;to&nbsp;div &nbsp;&nbsp;div.appendChild(textnode);&nbsp; &nbsp;&nbsp;//&nbsp;append&nbsp;to&nbsp;container &nbsp;&nbsp;container.appendChild(div);&nbsp;}

Answer 2

你可以在for循环中直接进行迭代：for&nbsp;(i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;newArray.length;&nbsp;i++){ &nbsp;&nbsp;&nbsp;&nbsp;x&nbsp;+=&nbsp;'<div&nbsp;id="box-'&nbsp;+&nbsp;i&nbsp;+&nbsp;'">&nbsp;class="box">'&nbsp;+&nbsp;newArray[i]&nbsp;+&nbsp;'</div>'; &nbsp;&nbsp;&nbsp;&nbsp;document.getElementById('container').innerHTML&nbsp;=&nbsp;x;}

Answer 3

如何在创建时赋予它id？也把这样class=box的引号放在- >&nbsp;class="box"。并且在for循环之后只添加整个div构造一次。因为现在你基本上多次覆盖整个事情。var&nbsp;words&nbsp;=&nbsp;[40];var&nbsp;count&nbsp;=&nbsp;0;var&nbsp;x&nbsp;=&nbsp;"";function&nbsp;nextElems()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;newArray&nbsp;=&nbsp;words.slice(count,&nbsp;count&nbsp;+&nbsp;8); &nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;newArray.length;&nbsp;i++) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Change&nbsp;class&nbsp;and&nbsp;add&nbsp;custom&nbsp;id &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x&nbsp;+=&nbsp;'<div&nbsp;class="box"&nbsp;id="box-'+i+'">'&nbsp;+&nbsp;newArray[i]&nbsp;+&nbsp;'</div>'; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;document.getElementById('container').innerHTML&nbsp;=&nbsp;x;&nbsp;//&nbsp;Add&nbsp;divs&nbsp;after&nbsp;for&nbsp;loop &nbsp;&nbsp;&nbsp;&nbsp;x&nbsp;=&nbsp;""; &nbsp;&nbsp;&nbsp;&nbsp;count&nbsp;+=&nbsp;8;}现在每个框都有一个唯一的id，从box-0，box-1，...到box-n