使用 jquery 动态创建具有递增 id 的 div答案

【问题标题】：Dynamically create divs with incremented id using jquery使用 jquery 动态创建具有递增 id 的 div
【发布时间】：2011-12-17 02:37:56
【问题描述】：

我有一个文本我想附加多个 div，但 id 应该动态更改。例如：

<div id=first>text</div>
<div id=first0>text</div>
<div id=first1>text</div>
<div id=first2>text</div>
<div id=first3>text</div>
<div id=first4>text</div>
<div id=first5>text</div>

有什么帮助吗？谢谢..

【问题讨论】：

你到底尝试了什么？你可以使用.attr('id', 'myID');
可能重复：stackoverflow.com/questions/347798/…

标签： jquery-ui jquery jquery-selectors

【解决方案1】：

您的标题和问题内容似乎不一致。我假设您想要创建 div，其中每个 id 每次创建时都会按顺序递增？

$(function(){
  var count = 0;
  $('#append').click(function(){
    $('#parent').append('<div id="first'+count+'">text</div>');
    count++;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="append">Add DIV</a>
<div id="parent"></div>

【讨论】：

正是我想要的。我的有点复杂，但这将是一个好的开始
这让我很开心！

【解决方案2】：

你可以用.attr()改变它：

$('#first').attr('id', 'first6')

【讨论】：

【解决方案3】：

尝试将代码更改为：

<div id="first">text</div>
<div id="first0">text</div>
<div id="first1">text</div>
<div id="first2">text</div>
<div id="first3">text</div>
<div id="first4">text</div>
<div id="first5">text</div>

不要忘记“”里面的id（id="first"不是id=first）

现在您可以简单地使用 jquery 了：$("#first").attr('id','first6');

【讨论】：

【解决方案4】：

如果您对样式的工作原理感兴趣。`

$(function(){
  for (let i = 0 ;i < 10; i ++){  
      $('#foo').append('<div id="first'+i+'">text</div>');
  }
});

#first4 {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo"></div>

【讨论】：

【解决方案5】：

创建一个 id=Container 的 div 并使用以下代码动态创建 5 个 div

//using JavaScript
 for(var i=0;i<5;i++){
     var obj = document.getElementById("container");
     obj.innerHTML += '<div id="first'+i+'"></div>';
 }

【讨论】：