码迷,mamicode.com
首页 > 移动开发 > 详细

createElement()结合appendChild()的实例

时间:2016-07-16 00:28:37      阅读:297      评论:0      收藏:0      [点我收藏+]

标签:

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

 

createElement()结合appendChild()的实例

标签:

原文地址:http://www.cnblogs.com/lijinwen/p/5674766.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!