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

我试图在使用JavaScript单击add按钮时添加一个新的文本框。这是我的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/>";

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

提前感谢。

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

用户为文本框生成随机id

var aa=Math.random（）；

---

用户要为文本框生成随机id，请使用当前设置跟踪全局设置中的id增量：

//outside function
var idIndex = 1;

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

element.setAttribute("type", "text");
element.setAttribute("value", "");
element.setAttribute("name", "Test Name");
element.setAttribute("id", "addLoc" + idIndex++);
element.setAttribute("style", "width:200px");

element.onclick = function()
{
    //do something
 }


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

编辑：回答此答案评论中的问题。当然，可以为每个新文本框添加不同的onclick处理程序（尽管您可能会更好地设计处理程序，以便可以为all使用单个处理程序，但如果出于某种原因需要使用不同的处理程序，您可以将匿名函数绑定到处理程序，我在上面添加了一种方法）

EDIT2:关于路径中的第二个问题，您可以使用两种方法。不要单独调用单独的函数

getFirstPath（）

getSecondPath（）

等。您可以使用一个名为

getPath（）

的函数，并将索引作为参数传递给它：

var getPath = function(index) {

    switch(index)
    {
        case 1:
            return getFirstPath();
            break;
        case 2:
            return getSecondPath();
            break; //and so on.
    }
}

然后您的

onclick

将如下所示：

element.onclick = function()
{
    getPath(index);
}

---

使用当前设置，您可以跟踪全局数据库中的id增量：

//outside function
var idIndex = 1;

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

element.setAttribute("type", "text");
element.setAttribute("value", "");
element.setAttribute("name", "Test Name");
element.setAttribute("id", "addLoc" + idIndex++);
element.setAttribute("style", "width:200px");

element.onclick = function()
{
    //do something
 }


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

编辑：回答此答案评论中的问题。当然，可以为每个新文本框添加不同的onclick处理程序（尽管您可能会更好地设计处理程序，以便可以为all使用单个处理程序，但如果出于某种原因需要使用不同的处理程序，您可以将匿名函数绑定到处理程序，我在上面添加了一种方法）

EDIT2:关于路径中的第二个问题，您可以使用两种方法。不要单独调用单独的函数

getFirstPath（）

getSecondPath（）

等。您可以使用一个名为

getPath（）

的函数，并将索引作为参数传递给它：

var getPath = function(index) {

    switch(index)
    {
        case 1:
            return getFirstPath();
            break;
        case 2:
            return getSecondPath();
            break; //and so on.
    }
}

然后您的

onclick

将如下所示：

element.onclick = function()
{
    getPath(index);
}

---

+1这是一个很好的方法，不依赖像我这样的全球人，全球人可能是坏消息（尽管我是一个异教徒，不同意他们在每个项目中都是坏消息）。+1这是一个很好的方法，不依赖像我这样的全球人，全球人可能是坏消息（尽管我是异教徒，不同意他们在每个项目中都是坏消息）。此外，我想知道每次我创建一个新的文本框时，是否可以为它们设置不同的onClick事件？例如，我添加了textbox3，它将启动function3。还有texbox4、功能4等等。好的，当然，非常感谢。但最后一个问题是，每次单击add按钮时，我都想将文本框附加到新行。我尝试了这种方法：foo.appendChild（“
”+元素）；但它向我抛出了一条错误消息：uncaughtnotfounderror：试图在不存在节点的上下文中引用该节点。另外，很抱歉不断提出问题。你能详细说明一下我在onClick里面应该做什么吗。假设addLoc1将执行getFirstPath（）。然后addLoc2将执行getSecondPath（）。我应该如何添加它。提前感谢。您收到一个错误，因为

是一个元素。您需要执行类似于

var lbreak=document.createElement（“br”）；foo.appendChild（元素）；foo.appendChild（lbreak）

关于第二个问题，有很多方法，你可以重新设计

getPath

函数以减少与路径的耦合，或者如果这不是一个选项，你可能需要将这些函数映射到一个数组中，然后根据

idIndex

引用函数，我也会在上面的答案中加入一个例子，我想知道每次我创建一个新的文本框时，是否可以为它们设置不同的onClick事件？例如，我添加了textbox3，它将启动function3。还有texbox4、功能4等等。好的，当然，非常感谢。但最后一个问题是，每次单击add按钮时，我都想将文本框附加到新行。我尝试了这种方法：foo.appendChild（“
”+元素）；但它向我抛出了一条错误消息：uncaughtnotfounderror：试图在不存在节点的上下文中引用该节点。另外，很抱歉不断提出问题。你能详细说明一下我在onClick里面应该做什么吗。假设addLoc1将执行getFirstPath（）。然后addLoc2将执行getSecondPath（）。我应该如何添加它。提前感谢。您收到一个错误，因为

是一个元素。您需要执行类似于

var lbreak=document.createElement（“br”）；foo.appendChild（元素）；foo.appendChild（lbreak）

关于第二个问题，有很多方法，你可以重新设计

getPath

函数以减少与路径的耦合，或者如果这不是一个选项，你可能需要将这些函数映射到一个数组中，然后根据

idIndex

引用函数。我将在上面的答案中加入一个例子