Javascript create divs with different ids

Question

I want a new div to be created everytime I click on a button. And for that I've been using the following code:

function createDiv(){
var divTag = document.createElement("div");
divTag.id = "div1";
divTag.setAttribute("align","center");
divTag.style.border = "1px solid #ccc";
}

However this will give every created div the id "div1". I need all the div:s to have different id:s. It would be nice if every new created div would be named "div + increasing number" (div1, div2, div3, div4, div5) and so on.

Diodeus - James MacFarlane · Accepted Answer · 2014-03-13 18:01:12Z

1

Create a counter that is then appended to the ID, then increment the counter.

var divCount = 0;
function createDiv(){
   var divTag = document.createElement("div"); 
   divTag.id = "div"+divCount;
   divCount++;
   divTag.setAttribute("align","center");
  divTag.style.border = "1px solid #ccc";
}

answered Mar 13, 2014 at 18:01

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Olvathar · Accepted Answer · 2014-03-13 18:04:46Z

0

You could also check if the div already exists and then increase your integer control

function createDiv() {
var created = false;
var index = 1;
  while (!created) {
    if (document.getElementById('div'+index) == null) { //not sure if the correct check is like this but something similar will work
      //create div here
      created = true;
    }
    else {
      index++;
    }
  }
}

Just an alternative

answered Mar 13, 2014 at 18:04

Olvathar

5513 silver badges10 bronze badges

1 Comment

Abhishek Over a year ago

getElementById lookups are expensive. If you create hundreds of divs, you're basically going to lookup all of those before creating a new one. Cheaper option would be just to remember the the last ID you assigned.

Collectives™ on Stack Overflow

Javascript create divs with different ids

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related