单击时会生成一个新文本框的按钮？ - Javascript答案

【问题标题】：A button that when clicked will generate a new textbox? - Javascript单击时会生成一个新文本框的按钮？ - Javascript
【发布时间】：2015-04-01 16:47:01
【问题描述】：

所以，我有三个文本框。第一个询问名字，第二个询问姓氏，第三个询问年龄。

当我单击按钮时，应该会生成第四个文本框，它应该包含到目前为止在每个文本框中输入的所有内容。我的问题是我什至无法让第四个文本框出现。我觉得我错过了一些非常简单的东西。到目前为止，这是我的代码。

<html>

<head>
</head>

<body>

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

element.setAttribute("type", "text");
element.setAttribute("value", "");
element.setAttribute("name", "Test Name");

}
</script>

<form>
<input type="text" value="Firstname">

<input type="text" value="Lastname">

<input type="text" value="Age">

<input type="button" onclick="addTextBox()">
</form>

</body>

</html>

【问题讨论】：

标签： javascript dynamic textbox

【解决方案1】：

您需要使用 appendChild 将元素附加到正文中，而您创建的元素只是错过了将其添加到文档中

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

element.setAttribute("type", "text");
element.setAttribute("value", "");
element.setAttribute("name", "Test Name");
document.body.appendChild(element);
}

【讨论】：

我知道这很简单。谢谢！ (:
@Lou 如果以上解决了您的问题，请将其标记为答案

【解决方案2】：

<html>
<head>
</head>
<body>
<script>
function addTextBox(btn) {
    var element = document.createElement("input");
    element.setAttribute("type", "text");
    element.setAttribute("value", "");
    element.setAttribute("name", "Test Name");
    btn.parentNode.insertBefore(element, btn)
}
</script>
<form>
<input type="text" value="Firstname">
<input type="text" value="Lastname">
<input type="text" value="Age">
<input type="button" id="btn" onclick="addTextBox(btn)">
</form>
</body>
</html>

【讨论】：

在插入文本框之前调用函数将按钮ID和函数传递给该按钮插入。

【解决方案3】：

另一种方法是创建表单并使用 css 隐藏它，然后使用您的 javascript 函数显示它并将数据注入其中。

html

<form name="myForm">
    <input type="text" value="Firstname" />
    <input type="text" value="Lastname" />
    <input type="text" value="Age" />
    <input type="text" value="" name="Test Name" id="box4" style="display:none">
    <input type="button" onclick="addTextBox()" />
</form>

javascript

function addTextBox() {
    var box4 = document.getElementById("box4");
    box4.style.display = "inline";
    var myForm = document.forms['myForm'];
    for (var i = 0; i < myForm.elements.length; i++) {
        box4.value += myForm.elements[i].value + ",";
    }
}

JS fiddle

【讨论】：