使用javascript/jquery动态创建div

我在html中有两个名为“answerdiv 1”和“answerdiv 2”的div

现在，我想给出/创建唯一的div id，如“answerdiv 3”、“answerdiv 4”、“answerdiv 5”等等

使用javascript/jquery，如何在这些动态创建的div中添加id应该是唯一的内容

在我的项目中，用户可以添加“n”个div，没有严格的限制

帮帮我

谢谢你

================================================================================

我的HTML代码是：

<div id="answertextdiv">
   <textarea id="answertext" name="answertext" placeholder="Type answer here" rows="2" cols="40" tabindex="6" onBlur="exchangeLabelsanswertxt(this);"></textarea>
</div>

我的JS代码：

function exchangeLabelsanswertxt(element)
{
    var result = $(element).val();
    if(result!="")
    {
        $(element).remove();
        $("#answertextdiv").append("<label id='answertext' onClick='exchangeFieldanswertxt(this);'>"+result+"</label>");
    }
}
function exchangeFieldanswertxt(element)
{
    var result = element.innerHTML; 
    $(element).remove();
    $("#answertextdiv").append("<textarea id='answertext' name='answertext' placeholder='Type answer here' rows='2' cols='40' tabindex='6' onBlur='exchangeLabelsanswertxt(this);'>"+result+"</textarea>");
}

函数交换elabelsanswertxt（元素）
{
var result=$（元素）.val（）；
如果（结果！=“”）
{
$（元素）.remove（）；
$（“#answertextdiv”）.append（“+result+”）；
}
}
函数exchangeFieldanswertxt（元素）
{
var result=element.innerHTML；
$（元素）.remove（）；
$（“#answertextdiv”）.append（“+result+”）；
}

现在，从上面的代码中，我想在唯一的“answertextdiv”id中添加所有内容。

您应该在Javascript中保留一个“全局”变量，其中包含创建的div数，每次创建div时，您都会增加该变量。 示例代码：

<script type="text/javascript">
  var divCount = 0;

  function addDiv(parentElement, numberOfDivs) {
    for(var i = 0; i < numberOfDivs; i++) {
      var d = document.createElement("div");
      d.setAttribute("id", "answerdiv"+divCount);
      parentElement.appendChild(d);
      divCount++;
    }
  }
</script>

var divCount=0；
函数addDiv（parentElement，numberOfDivs）{
对于（变量i=0；i

请记住，jQuery在Javascript中做很多事情都不是必需的。它只是一个帮助您“少写多做”的库。

您需要一个全局计数器（更一般地说：一个唯一的id生成器）来显式或隐式地生成id（后者，例如，通过选择生成的最后一个div，由类或其id前缀标识）

然后试试看

var newdiv = null; // replace by div-generating code
$(newdiv).attr('id', 'answerdiv' + global_counter++);
$("#parent").append(newdiv); // or wherever 

---

如果您的div位于以下容器中：

<div id="container">
  <div id="answerdiv 1"></div>
  <div id="answerdiv 2"></div>
</div>

你可以这样做：

//Call this whenever you need a new answerdiv added
var $container = $("container");
$container.append('<div id="answerdiv ' + $container.children().length + 1 + '"></div>');

//需要添加新的应答器时调用此选项
var$container=$（“container”）；
$container.append（“”）；

---

如果可能的话，尽量不要使用全局变量……它们最终会咬到你，在这种情况下你并不需要全局变量。

你可以尝试类似的方法来创建具有唯一ID的div

HTML

这是id为1的div
这是id为2的div

JavaScript

var i=2;
function insertDiv(){

    for(i;i<10;i++)
    {
        var d_id = i+1;



        $( "<div id='answerdiv-"+d_id+"'>This is div with id "+d_id+"</div>" ).insertAfter( "#answerdiv-"+i );

    }


}    

var i=2；
函数insertDiv（）{
对于（i；i
var newdivcount=0；
函数insertDivs（）{
newdivcount=newdivcount+1；
var id=“answerdiv-”+（newdivcount）；
var div=document.createElement（“div”）；
div.setAttribute（“ID”，ID）；
var输入=document.createElement（“TEXTAREA”）；
div.appendChild（输入）；
document.getElementById（'container'）.appendChild（输入）；
}
InsertDivs


我在下面使用了JQuery代码

$("#qnty1").on("input",function(e)
{
var qnt = $(this).val();
for (var i = 0; i < qnt; i++) {
var html = $('<div class="col-lg-6 p0 aemail1"style="margin-bottom:15px;"><input type="text"  onkeyup= anyfun(this)   class="" name="email1'+i+'" id="mail'+i+'"  > </div><div id=" mail'+i+'" class="lft-pa img'+i+' mail'+i+'"  > <img class="" src="img/btn.jpg" alt="Logo" > </div> <div id="emailer1'+i+'" class=" mailid "></div>');

var $html=$(html);
$html.attr('name', 'email'+i);
$('.email1').append($html);
}
}

$（“#qnty1”）。关于（“输入”，函数（e）
{
var qnt=$（this.val（）；
对于（变量i=0；i

我的HTML包含如下文本框

<input type="text" name="qnty1" id="qnty1"  class=""   >



及

以下是您可以尝试的另一种方法
//您可以使用动态内容
var dynamicContent=“部门编号”；
//没有你想要的div
var noOfdiv=20；
for（var i=1；我能给我们一些你可能正在使用的HTML示例吗？这可能会给你很多帮助：检查那篇文章：你需要一个类似for循环的循环，然后你的变量计数循环是n（比如div 3 div 4…n=数字）这是一种更好的方法，因为它不使用任何全局变量。即使div不在任何容器中，您也可以向这些div添加一个类，并使用
$（“.myDiv”）.size（）或
$（.myDiv”）.length
var ans=$（“#answertextdiv”）.length进行计数；这仅显示了1:（您需要使用.childrent（）.length）$(“#answertextdiv”）。长度应计算为1，除非您有多个answertextdiv
$（“#answertextdiv”）。查找（“div”）。长度
或
$（“#answertextdiv”）。子项（“div”）。长度
<input type="text" name="qnty1" id="qnty1"  class=""   >

 <div class="email1">
 </div>