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>

　　

 <script>

     window.onload = function(){

     var show = document.getElementById("show");

     var ul = document.getElementsByTagName("ul")[0];

     var li = ul.childNodes;

     for(var i=0; i<li.length; i++){

         li[i].onclick = function() {

             if(show.childNodes.length > 0){//判断show里面有没有东西

                 show.removeChild(show.childNodes[0]);//如果有就删掉，完成初始化

                 //show.innerHTML = '';//这样也能直接删除show的子节点，更方便

             }

             selectFunction(parseInt(this.getAttribute("value")));//value值是字符串，需要用parseInt()转换成数字，然后传值

         }

     }

     function selectFunction(index){//接收参数并调用相应的函数

         switch(index){

             case 1:createInput();

                 break;

             case 2:createSelect();

                 break;

             case 3:createText();

         }

     }

     function createInput() {

     //    show.removeChild(show.childNodes[0]);

         var e = document.createElement("input");

         e.type = "button";

         e.value = "这是加载测试的小例子";

         show.appendChild(e);

     }

     function createSelect(){

         var e = document.createElement("select");

         e.options[0] = new Option("加载项1","");

         e.options[1] = new Option("加载项2","");

         show.appendChild(e);

     }

     function createText(){

         var e = document.createElement("input");

         e.setAttribute("name","q");

         e.setAttribute("value","使用setAttribute");

         e.setAttribute("type","text");//使用setAttribute和e.type="text"；效果是一样的，但setAtt是1级dom,兼容性更好

         show.appendChild(e);

     }

 　　}

 </script>

这是效果

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

createElement()结合appendChild()的实例的更多相关文章

  1. appendChild append insertBefore prepend

      CreateTime--2017年11月2日16:57:59 Author:Marydon appendChild()与append() insertBefore()与prepend()区别与联系 ...

  2. 前端知识杂烩（Javascript篇）

    1. JavaScript是一门什么样的语言,它有什么特点?2.JavaScript的数据类型都有什么?3.请描述一下 cookies,sessionStorage 和 localStorage 的区 ...

  3. 《JavaScript DOM编程艺术》读后总结

    这是我读的第一本关于JS的书,刚开始我为了选择合适的学习JS的书,看了网上许多人的意见,基本上都是推荐先读这本书.书的内容挺简单的,确实很适合初学者看,阅读的过程中不会产生什么障碍.内容虽然简单,但我 ...

  4. CSS-JQUERY笔记

    Ready $(document).ready(function(){ }) Input_div_span Input-长度限制 <input maxLength="2"&g ...

  5. jQuery1.4源码解读

    来吧, 慢慢折腾吧 总结一下: jq1.4挺简单的, 正则写的不多, 看的都懂, 多写一些 三目写法到底要不要 特殊的地方的注释一定要有 /*! * jQuery JavaScript Library ...

  6. DOM知识梳理

    DOM 我们知道,JavaScript是由ECMAScript + DOM + BOM组成的.ECMAScript是JS中的一些语法,而BOM主要是浏览器对象(window)对象的一些相关知识的集合. ...

  7. [笔记]《JavaScript高级程序设计》- 最佳实践

    一.可维护性 1 什么是可维护的代码 可理解性--其他人可以接受代码并理解它的意图和一般途径,而无需原开发人员的完整解释. 直观性--代码中的东西一看就能明白,不管其操作过程多么复杂. 可适应性--代 ...

  8. 前端基础之BOM和DOM

    关于网页交互:BOM和DOM javaScript分为ECMAScript,DOM,BOM . BOM(Browser  object  Model)是指浏览器对象模型,它使JavaScript有能力 ...

  9. Web前端-JavaScript基础教程上

    Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...

随机推荐

  1. phpMyAdmin view_create.php 跨站脚本漏洞

    漏洞名称: phpMyAdmin view_create.php 跨站脚本漏洞 CNNVD编号: CNNVD-201307-066 发布时间: 2013-07-05 更新时间: 2013-07-05 ...

  2. 数据结构：（平衡树，链表）BZOJ 1588[HNOI2002]营业额统计

    1588: [HNOI2002]营业额统计 Time Limit: 5 Sec  Memory Limit: 162 MBSubmit: 12173  Solved: 4354[Submit][Sta ...

  3. HDOJ 2058 The sum problem

    Problem Description Given a sequence 1,2,3,--N, your job is to calculate all the possible sub-sequen ...

  4. 数学概念——A 几何概型

    You are going from Dhaka to Chittagong by train and you came to know one of your old friends is goin ...

  5. MySQL选用可重复读之前一定要想到的事情

    原文地址:http://blog.itpub.net/29254281/viewspace-1398273/ MySQL选用可重复读隔离级别之前一定要想到的事情.间隙锁 MySQL在使用之前有三个务必 ...

  6. wireshark的使用

    1. 过滤 比如输入www.baidu.com 使用域名过滤条件为 跟踪的过程是: 105和106是dns查询,108和115是dns回应,为什么会有两条,我也不是和清楚 展开106 可以它使用的是U ...

  7. 利用jks2pfx转换keystore格式的证书为pfs格式（含秘钥和证书的形式）

    利用java语言写的openssl转换证书格式工具,使用方法如下所示: Java KeyStore文件转换为微软的.pfx文件和OpenSSL的PEM格式文件(.key + .crt)运行方式:JKS ...

  8. 《JS原型》

    @(JavaScript原型) JavaScript中最晦涩难懂的恐怕就是原型了.故以此笔记本来记录原型的学习过程,日后忘了可来温习. 一切皆为对象 null--Object&Function ...

  9. PHP中统计目录中文件以及目录中目录的大小

    <?php  #循环遍历目录中所有的文件,并统计目录和文件的大小  $dirName="phpMyAdmin";  $dir=opendir($dirName);  #返回一 ...

  10. halt和shutdown 的区别

    1.halt -h 标准情况下是关机 但是要手动关闭电源 .有些发行版增强了halt脚本 使其可以关闭电源 halt执行时﹐杀死应用进程﹐执行sync系统调用﹐文件系统写操作完成后就会停止内核. 2. ...