单击将生成新文本框的按钮？-Javascript_Javascript_Dynamic_Textbox

单击将生成新文本框的按钮？-Javascript

javascript dynamic

单击将生成新文本框的按钮？-Javascript,javascript,dynamic,textbox,Javascript,Dynamic,Textbox,所以，我有三个文本框。第一个要求名字，第二个要求姓，第三个要求年龄当我点击按钮时，应该生成第四个文本框，它应该包含到目前为止在每个文本框中输入的所有内容。我的问题是我甚至不能让第四个文本框出现。我觉得我错过了一些很简单的东西。这是到目前为止我的代码 <html> <head> </head> <body> <script> function addTextBox() { var element = document.create

所以，我有三个文本框。第一个要求名字，第二个要求姓，第三个要求年龄

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

<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>


函数addTextBox（）{
var元素=document.createElement（“输入”）；
setAttribute（“类型”、“文本”）；
元素。setAttribute（“值”，“值”）；
setAttribute（“名称”、“测试名称”）；
}

您需要使用appendChild在body中追加元素，而您创建的元素只是在文档中添加它

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

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


函数addTextBox（btn）{
var元素=document.createElement（“输入”）；
setAttribute（“类型”、“文本”）；
元素。setAttribute（“值”，“值”）；
setAttribute（“名称”、“测试名称”）；
btn.parentNode.insertBefore（元素，btn）
}

另一种方法是创建表单并使用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 + ",";
    }
}

函数addTextBox（）{
var box4=document.getElementById（“box4”）；
box4.style.display=“inline”；
var myForm=document.forms['myForm']；
对于（var i=0；i


我知道事情会很简单。谢谢（：@Lou如果上述问题已解决，请将其标记为答案调用函数，以便在插入文本框之前将按钮id和函数传递到此按钮插入。。
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 + ",";
    }
}