CODEWITHSUNDEEP
jquery-uijqueryjquery-selectors
subho das
subho das

Reputation: 391

Dynamically create divs with incremented id using jquery

I have a text I want to append multiple divs but the id should be changed dynamically. e.g:

<div id=first>text</div>
<div id=first0>text</div>
<div id=first1>text</div>
<div id=first2>text</div>
<div id=first3>text</div>
<div id=first4>text</div>
<div id=first5>text</div>

Any help? thanks..

Upvotes: 8

Views: 54974

Answers (5)

Jitendra Singh Jeena
Jitendra Singh Jeena

Reputation: 1

Create a div with id=Container and the create 5 divs dynamically using following code 

//using JavaScript
 for(var i=0;i<5;i++){
     var obj = document.getElementById("container");
     obj.innerHTML += '<div id="first'+i+'"></div>';
 }

Upvotes: 0

Ben
Ben

Reputation: 21

try to change the code to :

<div id="first">text</div>
<div id="first0">text</div>
<div id="first1">text</div>
<div id="first2">text</div>
<div id="first3">text</div>
<div id="first4">text</div>
<div id="first5">text</div>

dont forget the id inside " " (id="first" not id=first)

now you can simply use jquery : $("#first").attr('id','first6');

Upvotes: 2

Jghorton14
Jghorton14

Reputation: 754

If you were interested in how styling works.`

$(function(){
  for (let i = 0 ;i < 10; i ++){  
      $('#foo').append('<div id="first'+i+'">text</div>');
  }
});
#first4 {
  background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo"></div>

Upvotes: 1

Hailwood
Hailwood

Reputation: 92581

Your title and question content seem to disagree with each other. I am assuming you are wanting to create div's where each id sequentially increments each time one is created?

$(function(){
  var count = 0;
  $('#append').click(function(){
    $('#parent').append('<div id="first'+count+'">text</div>');
    count++;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="append">Add DIV</a>
<div id="parent"></div>

Upvotes: 16

PiTheNumber
PiTheNumber

Reputation: 23542

You can change it with .attr():

$('#first').attr('id', 'first6')

Upvotes: 11

Related Questions