使用 javascript/jquery 动态创建 div

dynamically creating div using javascript/jquery

提问by Kajal

I have two div called "answerdiv 1" & "answerdiv 2" in html.

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

now i want to give/create div id uniquely like "answerdiv 3" "answerdiv 4" "answerdiv 5" and so on.

现在我想像“answerdiv 3”“answerdiv 4”“answerdiv 5”等一样唯一地给出/创建div id。

Using javascript/jquery how can i append stuff in these dynamically created divs which id should be unique?

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

in my project user can add "n" numbers of div, there is no strict limit to it.

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

Help me out.

帮帮我。

Thanks in Adv

感谢 Adv

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

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

My HTML code is:

我的 HTML 代码是：

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

My JS code:

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

Now from above code I want to append all stuff in unique "answertextdiv" id.

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

回答by mitchfuku

If your divs are in a container like:

如果您的 div 在一个容器中，例如：

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

you could do something like:

你可以这样做：

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

If possible, try not to use global variables...they'll eventually come back to bite you and you don't really need a global variable in this case.

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

回答by Awais Umar

You can try something like this to create divs with unique ids.

您可以尝试这样的方法来创建具有唯一 ID 的 div。

HTML

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

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

    }


}    

Here is the DEMO

这是演示

回答by mavrosxristoforos

You should keep a "global" variable in Javascript, with the number of divs created, and each time you create divs you will increment that. Example code:

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

And please keep in mind that jQuery is not necessary to do a lot of things in Javascript. It is just a library to help you "write less and do more".

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

回答by Raman B

I used below JQuery code for the same

我在下面使用了相同的 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);
}
}

my HTML contain text box like below.

我的 HTML 包含如下文本框。

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

and

和

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

回答by Arindam Sarkar

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>

回答by collapsar

you need a global counter (more generally: a unique id generator) to produce the ids, either explicitly or implicitly (the latter eg. by selecting the last of the generated divs, identified by a class or their id prefix).

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

then try

然后尝试

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

回答by ANUJ SINGH

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>