html - 如何循环一堆具有不同ID的div？

Question

我很好奇如何创建 5 个 div 并且每个 id 都是不同的，就像这样，通过将它们循环到手动输入它们的内部。

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>

我假设您会创建一个 for 循环，但我不知道在 html 中放入什么以将计数器放入 id 名称中。

Answer 1

是的 - 您可以使用for循环：

@for(var i = 1; i < 6;i++){
    <div id="@("div" + i)"></div>
}

修改以考虑 id 中的“div”前缀。

Answer 2

您需要知道将这些 div 元素放置在整个 HTML 文件中的哪个位置，然后再担心会自动将它们放在那里的代码。如果您只想附加它们，可以使用 document.write() 函数。如果您希望它们位于其他元素（例如表单元素）中，那么事情会变得有些棘手。

下面是一些 JavaScript 代码，展示了几种可能性（JavaScript 将由文档的 body 元素的“onload”事件处理程序调用）：

var frm, dv, indx, str, txt;
frm = document.getElementById("FormId"); //obviously the form element needs an id
for(indx=1; indx<6; indx++)
{ str = "div" + indx;
  dv = document.createElement("div");
  dv.id = str;
//If the div should contain some text, then you also need lines like these two:
  txt = document.createTextNode("Here is some text for " + str);
  dv.appendChild(txt);

  frm.appendChild(dv); //ok, now insert the div into the form
//Another alternative involves yet another function:
  document.body.insertBefore(dv, frm); //PRECEDE the form element with the div
//Finally, as originally mentioned:
  document.write(dv); //append the div at the end of the document
}

Answer 3

或者在 php 中：

for( $i = 0; $i < 5; $i++ ) { 
     print("<div id='div$i'> </div>"); 
}