createElement()结合appendChild()的实例

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>

这是效果

效果：http://lingwer111.go4.arebz.co/createElement.html