Using Javascript to dynamically create dom elements with incrementing ID's

Question

I have a div with an ID "orangeButton" and each time you click on it it creates a new div. This works fine but... I want each newly created div to have an incremental number added to it's ID.

I am not sure how to do this.

Here is a fiddle of the code I have thus far with comments.

http://jsfiddle.net/taoist/yPrab/1/

Thank you

Javascript Code

   var applicationArea = document.getElementById("applicationArea");
    var orangeButton = document.getElementById("orangeButton");


    orangeButton.onclick = function() {
      var newDivThingy = document.createElement("div");
      newDivThingy.id  = 'newDivThingy';  // I want each newly created div to have a      numeric value concatenated to it's ID. IE newDivThingy1 newDivThingy2 newDivThingy3
      applicationArea.appendChild(newDivThingy);


    };

Just keep a variable var index = 0; and do newDivThingy.id = 'newDivThingy' + (index++);. — Felix Kling
– Felix Kling, Commented Jan 1, 2013 at 4:29
No JQuery. I prefer to stick to raw Javascript for my own learning purposes. Felix seems like he has the answer I'm looking for. Will try it. — William
– William, Commented Jan 1, 2013 at 4:31

Jake · Accepted Answer · 2017-02-27 01:57:29Z

8

Am I missing something, why not use a counter?

var counter = 0;
button.onclick = function(){
   var newDivThingy = document.createElement("div");
   newDivThingy.id  = 'newDivThingy' + (++counter);
   // continue your stuff here     
}

edited Feb 27, 2017 at 1:57

Jake

4,8992 gold badges36 silver badges47 bronze badges

answered Jan 1, 2013 at 4:31

bakkal

55.6k12 gold badges136 silver badges113 bronze badges

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

2 Comments

William Over a year ago

I tried playing with different ways to create a counter and couldn't figure out the proper syntax. I decided to ask instead of waste time.

bakkal Over a year ago

@Taoist, Cool. Play with ++counter and counter++ to start from 0 or 1 for the <div> ID. I'd keep the initial counter at 0, that way it reflects current number of created items. Cheers!

Michael Christensen · Accepted Answer · 2013-01-01 04:51:33Z

1

Libraries like underscorejs provide a uniqueid function for this. Otherwise its easy to implement one.

myNamespace.uniqueId = (function () {
    var counter = 0; // in closure
    return function (prefix) {
        counter++;
        return (prefix || '') + '-' + counter; 
    };
}());

Usage.

newDiv.id = myNamespace.uniqueId('newDiv');

answered Jan 1, 2013 at 4:51

Michael Christensen

1,7861 gold badge13 silver badges11 bronze badges

2 Comments

Alexis Wilke Over a year ago

This looks cool. Just wondering... Is a return function(){....} making a copy of the function each time?

Michael Christensen Over a year ago

@AlexisWilke No, because the self executing function fires once. The result is uniqueId is assigned function (prefix) { ... having the counter variable in a closure (and its own private scope)

user1585455 · Accepted Answer · 2013-01-01 04:36:15Z

0

Simply use a integer and increment it as each element is added.

var applicationArea = document.getElementById("applicationArea"),
    orangeButton = document.getElementById("orangeButton"),
    counter = 1;

orangeButton.onclick = function() {
    var newDivThingy = document.createElement("div");
        newDivThingy.id = "newDivThingy" + counter++;
    applicationArea.appendChild(newDivThingy);
}

answered Jan 1, 2013 at 4:36

user1585455

Comments

Rob.Scribe · Accepted Answer · 2013-12-14 17:45:37Z

0

I have no doubt you have solution and may have forgotten this post. BUT, I wold like to show a solution that is a compact format.

Note the counter is set to (counter++) so it will start at 1.

var orangeButton = document.getElementById("orangeButton");
var counter = 0;
  orangeButton.onclick = function() {
    document.getElementById('applicationArea')
    .appendChild(document.createElement('div'))
    .setAttribute("id", 'newDivThingy' + counter++);
  // I want each newly created div to have a
  // numeric value concatenated to it's ID.
  // IE newDivThingy1 newDivThingy2 newDivThingy3
  };

answered Dec 14, 2013 at 17:45

Rob.Scribe

1171 silver badge1 bronze badge

Collectives™ on Stack Overflow

Using Javascript to dynamically create dom elements with incrementing ID's

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related