JavaScript 在点击按钮时动态添加文本框

Question

我正在尝试使用 JavaScript 在单击添加按钮时添加一个新的文本框。这是我的 HTML:

htmlStr += "<div id='filterContent' style='width:100%;text-align:center;'>";
htmlStr += "<input id='startLoc' type='text' />";
htmlStr += "<input id='endLoc' type='text' />";
htmlStr += "<input id='addLoc' type='button' value='Add' onClick='addTextBox()' />";
htmlStr += "</div><br/>";

这是我的 JavaScript，用于在单击按钮时添加一个新的文本框:

function addTextBox(){
var element = document.createElement("input");

element.setAttribute("type", "text");
element.setAttribute("value", "");
element.setAttribute("name", "Test Name");
//element.setAttribute("style", "width:200px");

var foo = document.getElementById("filterContent");
foo.appendChild(element);
}

它完美地添加了我想要的任意数量的文本框。但不知何故，创建的文本框共享相同的 ID。我想知道是否可以在每次单击按钮时添加许多具有不同 ID 的文本框？

提前致谢。

Answer 1

var aa=Math.random();   
 <input id='addLoc"+aa+"' type='text' />

用户 math.random为文本框生成随机 ID