使用JavaScript/jQuery动态创建div

Question

我在HTML中有两个名为"answerdiv 1"和"answerdiv 2"的div。

现在我想唯一地创建div id，如"answerdiv 3"、 "answerdiv 4"、 "answerdiv 5"等。

使用JavaScript/jQuery，我如何在这些动态创建的具有唯一标识符的div中添加内容？

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

请帮我解决这个问题。

谢谢。

<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>");
}

现在，我想将上述代码中的所有内容附加到唯一的“answertextdiv” ID 中。

- Kajal

---

你能给我们提供你正在使用的任何HTML示例吗？ - Chris Kempen

这可能会对你有很大帮助：https://dev59.com/3nNA5IYBdhLWcg3wrf43 - Kingk

请查看以下帖子：https://dev59.com/3nNA5IYBdhLWcg3wrf43 - Rami

你需要一个像for循环这样的循环，然后计数循环的变量是n（例如div 3 div 4 ... n = 数字）。 - dotchuZ

Answer 1

如果你的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>');

如果可能，尽量不要使用全局变量......因为它们最终会让你后悔，而且在此情况下你并不真正需要一个全局变量。

- mitchfuku

---

这是一种更好的方法，因为它不使用任何全局变量。即使div不在任何容器中，您也可以向这些div添加一个类，并使用$（“.myDiv”）.size（）或$（“.myDiv”）.length进行计数。 - Anupam

变量 ans = $（“#answertextdiv”）。长度;这只显示给我1。:( - Kajal

你需要使用.children().length。http://api.jquery.com/children/ 除非你有多个answertextdiv，否则$("#answertextdiv").length应该评估为1。 - mitchfuku

$("#answertextdiv").find("div").length 或者 $("#answertextdiv").children("div").length - Anupam

Answer 2

您可以尝试像这样创建具有唯一ID的div：

HTML

<input type="button" value="Insert Div" onClick="insertDiv()" />
<div class="container">
 <div id="answerdiv-1">This is div with id 1</div>
 <div id="answerdiv-2">This is div with id 2</div>
</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 );

    }


}    

这里有一个技术演示链接：DEMO。

- user1860859

Answer 3

我使用了以下 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);
}
}

我的HTML包含以下文本框。

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

并且

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

- Raman B

Answer 4

你应该在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>

请记住，使用JavaScript并不一定需要jQuery。它只是一个库，帮助你“少写代码，做更多的事情”。

- mavrosxristoforos

Answer 5

你需要一个全局计数器（更普遍地说：唯一 ID 生成器）来产生 ID，可以明确地或隐式地实现（例如通过选择生成的 div 中的最后一个，由类或其 ID 前缀标识）。然后尝试。

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

- collapsar

Answer 6

var newdivcount=0;
    function insertDivs(){
      newdivcount=newdivcount+1;
      var id="answerdiv-"+(newdivcount);
      var div=document.createElement("DIV");
      div.setAttribute("ID",id);
      var input=document.createElement("TEXTAREA");
      div.appendChild(input);
      document.getElementById('container').appendChild(input);  
    }

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

- user3751794

Answer 7

Here is the another way you can try

// you can use dynamic Content
var dynamicContent = "Div NO "; 
// no of div you want 
var noOfdiv = 20;

for(var i = 1; i<=noOfdiv; i++){
  $('.parent').append("<div class='newdiv"+i+"'>"+dynamicContent+i+"</div>" )
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  
</div>

- Arindam Sarkar