dynamically creating div using javascript/jquery

Question

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

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

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

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

Help me out.

Thanks in Adv

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

My HTML code is:

<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:

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.

Could you give us any HTML example you might be working with? — Chris Kempen, Sep 24 '13 at 07:59
This could help you a lot: http://stackoverflow.com/questions/867916/creating-a-div-element-in-jquery — Kingk, Sep 24 '13 at 08:00
Check that post: http://stackoverflow.com/questions/867916/creating-a-div-element-in-jquery — Rami, Sep 24 '13 at 08:01
you need a loop like a for-loop and then your variable counting the loop is n (like div 3 div 4 ... n = the number) — dotchuZ, Sep 24 '13 at 08:01

score 8 · Answer 1 · answered Sep 24 '13 at 08:09

8

If your divs are in a container like:

<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.

answered Sep 24 '13 at 08:09

mitchfuku

309
1
2
7

1

This is a much better approach because it does not use any global variable. Even if the divs are not in any container, you can add a class to these divs and count using `$(".myDiv").size()` or `$(".myDiv").length` – Anupam Sep 24 '13 at 08:11
var ans = $("#answertextdiv").length; this is showing me 1 only :( – Kajal Sep 24 '13 at 08:31
you need to use .children().length. http://api.jquery.com/children/ $("#answertextdiv").length should evaluate to 1 unless you have multiple answertextdiv's – mitchfuku Sep 24 '13 at 09:06
`$("#answertextdiv").find("div").length` or `$("#answertextdiv").children("div").length` – Anupam Sep 24 '13 at 09:36

score 3 · Answer 2 · answered Sep 24 '13 at 08:39

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

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

    }


}

Here is the DEMO

score 1 · Answer 3 · answered Sep 24 '13 at 08:03

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:

<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".

Raman B · Answer 4 · 2016-07-20T05:47:55.210

I used below JQuery code for the same

$("#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.

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

and

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

score 0 · Answer 5 · answered Sep 24 '13 at 08:07

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

then try

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

score 0 · Answer 6 · 2016-04-23T06:26:53.880

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>

score 0 · Answer 7 · answered May 04 '19 at 20:23

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>

dynamically creating div using javascript/jquery

7 Answers7

Linked