JavaScript dynamically adds form elements to form forms

November 7, 2014 17:10:40

I have written a few similar articles before, and now it seems to be more elementary, to get a high-level simple

Scenario: The background to upload the game, the number is not sure, so use dynamic Add input node method to achieve this effect

The main functions used are:

document.getElementById ();

Objnode.parentnode;

Objnode.clonenode ();

Objnode.removeatrribute ();

Objnode.innerhtml ();

Objnode.appendchild ();

Html:

1 <Divclass= "Well well-sm">2     <Divclass= "Form-group">3         <labelclass= "Form-label">Game:</label>4         <inputtype= "File"name= "jietu[]"class= "Form-input">5         <spanclass= "Form-tip"onclick= "Add_jietu ()"><FontColor= "#428bca">Click Add Game</Font></span>6     </Div>7     <Divclass= "Form-group"ID= "Add_jietu">8         <labelclass= "Form-label">Game:</label>9         <inputtype= "File"name= "jietu[]"class= "Form-input">Ten     </Div> One </Div>

Javascript:

1<script type= "Text/javascript" >2 functionAdd_jietu ()3 {4     varAdd_jietu = document.getElementById (' Add_jietu '));5     varNodefather =Add_jietu.parentnode;6     varNode_clone =Add_jietu.clonenode ();7Content =add_jietu.innerhtml;8Node_clone.removeattribute (' id ');9node_clone.innerhtml =content;Ten Nodefather.appendchild (node_clone); One } A</script>

Attention:

1. JS Line 6th uses the "Clone node" function, there is no HTML in the cloned node, requires the 9th line of code to fill the content

2. Use the Clone function, because the method generates a variable type of "node type" can be used in the appendchild () function to do parameters

3. The variables obtained by the nextSibling and LastChild properties of the node are of type text (see in Chrome's debug window)

JavaScript dynamically adds form elements to form forms