createElement()作用是在JavaScript中创建一个元素
appendChild()向html元素添加节点
下面是冲浪后改编的例子代码
先插html代码
<body> <ul> <li value="1">加载按钮</li> <li value="2">加载下拉框</li> <li value="3">加载文本框</li> </ul> <div id = "show">例子将在这里进行展示</div> </body>
1 <script> 2 window.onload = function(){ 3 4 var show = document.getElementById("show"); 5 var ul = document.getElementsByTagName("ul")[0]; 6 var li = ul.childNodes; 7 for(var i=0; i<li.length; i++){ 8 li[i].onclick = function() { 9 if(show.childNodes.length > 0){//判断show里面有没有东西 10 show.removeChild(show.childNodes[0]);//如果有就删掉，完成初始化 11 //show.innerHTML = '';//这样也能直接删除show的子节点，更方便 12 } 13 selectFunction(parseInt(this.getAttribute("value")));//value值是字符串，需要用parseInt()转换成数字，然后传值 14 } 15 } 16 function selectFunction(index){//接收参数并调用相应的函数 17 switch(index){ 18 case 1:createInput(); 19 break; 20 case 2:createSelect(); 21 break; 22 case 3:createText(); 23 24 } 25 } 26 function createInput() { 27 // show.removeChild(show.childNodes[0]); 28 var e = document.createElement("input"); 29 e.type = "button"; 30 e.value = "这是加载测试的小例子"; 31 show.appendChild(e); 32 } 33 function createSelect(){ 34 35 var e = document.createElement("select"); 36 e.options[0] = new Option("加载项1",""); 37 e.options[1] = new Option("加载项2",""); 38 show.appendChild(e); 39 } 40 function createText(){ 41 var e = document.createElement("input"); 42 e.setAttribute("name","q"); 43 e.setAttribute("value","使用setAttribute"); 44 e.setAttribute("type","text");//使用setAttribute和e.type="text"；效果是一样的，但setAtt是1级dom,兼容性更好 45 show.appendChild(e); 46 } 47 } 48 </script>
这是效果