Dynamically creating a div using javascript / jquery

Question

I have two divs called "answerdiv 1" and "answerdiv 2" in html.

now i want to give / create div id uniquely as "answerdiv 3" "answerdiv 4" "answerdiv 5" etc.

Using javascript / jquery, how can I add material to these dynamically created divs whose identifier must be unique?

in my project, the user can add "n" div numbers, there is no strict restriction for him.

Help me.

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

 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 the previous code I want to add all the data to the unique answertextdiv identifier.

Answer 1

If your divs are in a container, for example:

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

you can 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 will eventually come back to bite you, and you really don't need a global variable.

Answer 2

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

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 a demo

Answer 3

You have to store the “global” variable in Javascript, with the number of divs created, and every time you create divs, you increment this. Code example:

 <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 keep in mind that jQuery does not need to do many things in Javascript. It is just a library to help you "write less and do more."

Answer 4

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 contains a text box as shown below.

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

and

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

Answer 5

you need a global counter (in the general case: a unique identifier generator) to create identifiers, explicitly or implicitly (the latter, for example, by selecting the last of the generated divs identified by the 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 

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> 

Answer 7

Here is 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>