Write a small system, you need to dynamically add form elements, according to their own way to write this tutorial!
I think you have seen a similar effect on many websites!
1, first use the Document.createelement method to create an INPUT element!
Copy Code code as follows:
var newinput = document.createelement ("input");
2, set related properties, such as Name,type, etc.
Copy Code code as follows:
Newinput.type=mytype;
Newinput.name= "INPUT1";
3, with the AppendChild method, the element appended to a label content!
Copy Code code as follows:
Temo.appendchild (Newinput);
Javascrip Core Code:
Copy Code code as follows:
<script language= "JavaScript" >
function AddElement (mytype) {
var Mytype,temo=document.getelementbyid ("Add");
var newinput = document.createelement ("input");
Newinput.type=mytype;
Newinput.name= "INPUT1";
Temo.appendchild (Newinput);
var newline= document.createelement ("BR");//Create a BR label to be able to wrap the line!
Temo.appendchild (newline);
}
</script>
<ptml > <pead> <title> Dynamic Add table cell element </title> </pead> <script language= "JavaScript" > Fu Nction addelement (mytype) {var Mytype,temo=document.getelementbyid ("Add"); var newinput = document.createelement ("input"); Newinput.type=mytype; Newinput.name= "INPUT1"; Temo.appendchild (Newinput); var newline= document.createelement ("BR"); Temo.appendchild (newline); } </script> <body> <form action= "" method= "Get" name= "frm" > <div id= "Add" > <i Nput type= "text" name= "TextField" > </div> </form> <input name= "" type= "button" value= "New text box" Oncli ck= "addelement (' text ')"/> <input name= "" type= "button" value= "New checkbox" onclick= "AddElement (' checkbox ')/> &L T;input name= "type=" button "value=" New Radio Box "onclick=" addelement (' Radio ') "/> <input name=" "type=" button "value=" New file Field "onclick=" addelement (' file ') "/> <input name=" "type=" button "value=" New Password Box "onclick=" addelement (' pAssword ') "/> <input name=" "type=" button "value=" New Submit button "onclick=" addelement (' Submit ') "/> <input name= "Type=" button "value=" New Restore button "onclick=" addelement (' reset ') "/> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
