如何在Javascript动态添加文本框？(How do I add textboxes dynam

默认情况下，我有5个文本框。当用户点击一个按钮，一个文本框应予以补充。

我怎么能这样做？

Answer 1:

如果更换的innerHTML，先前输入的值将被清除，以避免这种情况，可以追加输入元素编程：

var input = document.createElement('input'); 
input.type = "text"; 
//...    
container.appendChild(input);

检查这个例子。

Answer 2:

JavaScript函数

function add() {

//Create an input type dynamically.
var element = document.createElement("input");

//Create Labels
var label = document.createElement("Label");
label.innerHTML = "New Label";     

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

label.setAttribute("style", "font-weight:normal");

// 'foobar' is the div id, where new fields are to be added
var foo = document.getElementById("fooBar");

//Append the element in page (in span).
foo.appendChild(label);
foo.appendChild(element);
}

HTML部分，

<button id="button" value="Add" onClick:"javascript:add();">

而且，它的完成了！

Answer 3:

<script>
function add()
{
    document.getElementById("place").innerHTML="<input type='text' value=''>"
}
</script>
<input type="button" value="clickMe" onClick="add();">
<div id="place"></div>

Answer 4:

<script>
function add()
{
    var inpt = document.getElementById('input_template');
    inpt.parentNode.appendChild(inpt.cloneNode(false));
}
</script>

<input type="button" onclick="add();">

设置ID = input_template到预定义的文本框的一个

Answer 5:

最好是就在附加一个事件onclick按钮，将设置一个div的可见性inline 。这是关于我可以看到这一点，考虑到灵活性和稳定性的最佳途径。

有一个看看这里的示例代码。

Answer 6:

通过改变for循环值，我们可以动态生成文本框

 function addFunction() { var table = document.getElementById("textbox"); var rowlen = table.rows.length; var row = table.insertRow(rowlen); row.id = rowlen; var arr = ['textboxfiledname']; for (i = 0; i < 2; i++) { var x = row.insertCell(i) if (i == 1) { x.innerHTML = "<input type='button' onclick='removeCell(" + row.id + ")' value=Delete>" } else { x.innerHTML = "<label>" + arr[i] + ":</label><input type='textbox' name='" + arr[i] + "'>" } } } function removeCell(rowid) { var table = document.getElementById(rowid).remove(); }

 input[type=text] { width: 100%; height: 50%; padding: 15px; border: 1px solid #ccc; border-radius: 4px; resize: vertical; } label { padding: 12px 12px 12px 0; display: inline-block; font-family: sans-serif; } input[type=button] { background-color: #4CAF50; border: none; color: white; padding: 6px 20px; text-decoration: none; margin: 4px 2px; cursor: pointer; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <fieldset style="margin-left:20%;margin-right:20%;font-family:sans-serif;padding:15px;border-radius:5px;background:#f2f2f2;border:5px solid #1F497D"> <legend style="background:#1F497D;color:#fff;padding:5px 10px;font-size:22px;border-radius:5px;margin-left:20px;box-shadow:0 0 0 5px #ddd">DynamicTextbox</legend> <table id="textbox"> <tr> <td> <input type="button" onclick="addFunction()" value="AddTextbox" /> </td> </tr> </table> </fieldset>

Answer 7:

试试这个

<html>
<head>
<title>Dynamic Form</title>
<script language="javascript" type="text/javascript" >
function changeIt()
{

createTextbox.innerHTML = createTextbox.innerHTML +"<br><input type='text' name='mytext' >"

}
</script>
</head>
<body>

<form name="form">
<input type="button" value="clickHere" onClick="changeIt()">
<div id="createTextbox"></div>
</form> 
</body>
</html>

Answer 8:

<!DOCTYPE html>
<html>
<body>
 <h1>My First Web Page</h1>
 <p>My first paragraph.</p>
 <button type="button" onclick="myFunction()">Click me!</button>
 <script>
 var count =0;
 function myFunction() {
 count++
  document.write('Lable1');
  document.write('<input type="text" name="one+count">');
  document.write('Lable2');
  document.write('<input type="text" name="two+count">');

  document.write('Lable3'); 
  document.write('<input type="text" name="three+count">');

  document.write('Lable4');
  document.write('<input type="text" name="four+count">');

  document.write(count);

  }
  </script>

  </body>
  </html>

文章来源: How do I add textboxes dynamically in Javascript?