The createelement () function is to create an element in JavaScript
AppendChild () Adding nodes to HTML elements
Here is an example code for post-surfing adaptations
Inserting HTML code First
<body><ul><li value= "1" > Load button </li><li value= "2" > Load drop-down box </li><li value= "3" > Load this box </li></ul><div id = "Show" > Example will be shown here </div></body>
1<script>2Window.onload =function(){3 4 varShow = document.getElementById ("Show");5 varUL = document.getElementsByTagName ("ul") [0];6 varLi =Ul.childnodes;7 for(vari=0; i<li.length; i++){8Li[i].onclick =function() {9 if(Show.childNodes.length > 0) {//Judging if there's anything in show.TenShow.removechild (Show.childnodes[0]);//if any, delete it and complete the initialization. One //show.innerhtml = ";//This can also directly delete show sub-nodes, more convenient A } -Selectfunction (parseint ( This. getattribute ("value")));//Value is a string that needs to be converted to a number using parseint () and then passed the value - } the } - functionSelectfunction (index) {//receive parameters and invoke the appropriate function - Switch(index) { - Case1: Createinput (); + Break; - Case2: Createselect (); + Break; A Case3: CreateText (); at - } - } - functionCreateinput () { - //Show.removechild (show.childnodes[0]); - varE = document.createelement ("Input"); inE.type = "button"; -E.value = "This is a small example of loading tests"; to Show.appendchild (e); + } - functionCreateselect () { the * varE = document.createelement ("select"); $E.options[0] =NewOption ("Add-in 1", "");Panax NotoginsengE.OPTIONS[1] =NewOption ("Add-in 2", ""); - Show.appendchild (e); the } + functionCreateText () { A varE = document.createelement ("Input"); theE.setattribute ("name", "Q"); +E.setattribute ("value", "Using SetAttribute"); -E.setattribute ("type", "text");//use setattribute and e.type= "text"; the effect is the same, but Setatt is a Level 1 dom, better compatibility $ Show.appendchild (e); $ } - } -</script>
That's the effect.
Effect: http://lingwer111.go4.arebz.co/createElement.html
Example of createelement () combined with appendchild ()
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
