Using Javascript To Dynamically Create Dom Elements With Incrementing ID's

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 adde

Solution 1:

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     
}

Solution 2:

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

Solution 3:

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
  };​