Home > Developer > JavaScript
When writing a small system, you need to dynamically add form elements and write this tutorial in your own implementation method!
I think you have seen similar results on many websites!
1. Use the document. createElement method to create an input element!
Copy codeThe Code is as follows:
Var newInput = document. createElement ("input ");
2. Set relevant attributes, such as name and type.
Copy codeThe Code is as follows:
NewInput. type = mytype;
NewInput. name = "input1 ";
3. Use the appendChild method to append an element to a tag!
Copy codeThe Code is as follows:
TemO. appendChild (newInput );
Javascrip core code:
Copy codeThe Code is 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 for newline!
TemO. appendChild (newline );
}
</Script>
<Html> <pead> <title> dynamically add form elements </title> </pead> <body> <input name = "" type = "button" value = "new text box "onClick =" AddElement ('text ') "/> <input name =" "type =" button "value =" new check box "onClick =" AddElement ('checkbox ') "/> <input name =" "type =" button "value =" new ticket "onClick =" AddElement ('Radio ') "/> <input name =" "type =" button "value =" New file domain "onClick =" AddElement ('file ') "/> <input name =" "type =" button "value =" new password "onClick =" AddElement ('Password ') "/> <input name =" "type =" button "value =" "onClick =" AddElement ('submit ') "/> <input name =" "type =" button "value =" new recovery button "onClick =" AddElement ('reset ') "/> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
