使用 Javascript 动态创建具有递增 ID 的 dom 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14107817/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Javascript to dynamically create dom elements with incrementing ID's
提问by William
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.
我有一个 ID 为“orangeButton”的 div，每次点击它都会创建一个新的 div。这工作正常，但是...我希望每个新创建的 div 都有一个增量编号添加到它的 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/
http://jsfiddle.net/taoist/yPrab/1/
Thank you
谢谢
Javascript Code
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);
};?
回答by bakkal
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
}
回答by Michael Christensen
Libraries like underscorejs provide a uniqueid function for this. Otherwise its easy to implement one.
像 underscorejs 这样的库为此提供了一个 uniqueid 函数。否则很容易实现一个。
myNamespace.uniqueId = (function () {
var counter = 0; // in closure
return function (prefix) {
counter++;
return (prefix || '') + '-' + counter;
};
}());
Usage.
用法。
newDiv.id = myNamespace.uniqueId('newDiv');
回答by Rob.Scribe
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.
请注意，计数器设置为 (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
};?
回答by railgun
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);
}
