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
时间： 2024-08-13 08:32:11