javascript - 使用 Javascript 动态创建具有递增 ID 的 dom 元素

Question

我有一个 ID 为“orangeButton”的 div，每次单击它都会创建一个新的 div。这很好用，但是......我希望每个新创建的 div 都有一个递增的数字添加到它的 ID。

我不知道该怎么做。

这是迄今为止我的评论代码的小提琴。

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

谢谢

Javascript代码

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


    };​

Answer 1

我错过了什么，为什么不使用计数器？

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

Answer 2

像 underscorejs 这样的库为此提供了一个 uniqueid 函数。否则它很容易实现。

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

用法。

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

Answer 3

只需使用一个整数并在添加每个元素时递增它。

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

Answer 4

我毫不怀疑您有解决方案，并且可能已经忘记了这篇文章。但是，我想展示一个紧凑格式的解决方案。

请注意，计数器设置为 (counter++)，因此它将从 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
  };​