如何使用与按钮单击相关的功能在表单中动态附加文本框

Question

这是我尝试做的

当我按下按钮时，文本框未正确附加，但是我得到以下输出：

另外，如果我在文本框中输入文本，然后按下按钮，则文本框中的文本（在这种情况下为电子邮件）也将被复制，有什么办法可以避免这种情况？

 var newtb, reftb function addElement() { newtb = document.getElementById("mail") //*** reftb = document.getElementById("phone") document.getElementById("myForm").insertBefore(newtb, reftb) } 

 <form id="myForm"> <input type="text" id="name" placeholder="Enter your first name"><br><br> <input type="text" id="surname" placeholder="Enter your last name"><br><br> <input type="email" id="mail" placeholder="Enter your email"> <input type="button" id="addElementButton" value="+" onclick="addElement()"><br><br> <input type="text" id="phone" placeholder="Enter your phone number"><br><br><br> <input type="submit" id="submit" placeholder="Enter your phone number"> </form> 

Answer 1

您需要使用document.createElement

 var cnt=0; function addElement() { var reftb = document.getElementById("phone") var mail = document.createElement("input"); mail.type="text"; mail.id="mail"+(++cnt); mail.placeholder="Enter your email" document.getElementById("myForm").insertBefore(mail, reftb) document.getElementById("myForm").insertBefore(document.createElement("br"), reftb); document.getElementById("myForm").insertBefore(document.createElement("br"), reftb); } 

 <form id="myForm"> <input type="text" id="name" placeholder="Enter your first name"><br><br> <input type="text" id="surname" placeholder="Enter your last name"><br><br> <input type="email" id="mail" placeholder="Enter your email"> <input type="button" id="addElementButton" value="+" onclick="addElement()"><br><br> <input type="text" id="phone" placeholder="Enter your phone number"><br><br><br> <input type="submit" id="submit" placeholder="Enter your phone number"> </form>