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. CH Round #58 - OrzCC杯noip模拟赛day2

    A:颜色问题 题目:http://ch.ezoj.tk/contest/CH%20Round%20%2358%20-%20OrzCC杯noip模拟赛day2/颜色问题 题解:算一下每个仆人到它的目的地 ...

  2. C语言基础课程 第二课 HelloWorld不为菜鸟所知的秘密

    1    愉快的开端hello world    4 1.1    include头文件包含    4 1.2    main函数    4 1.3    注释    4 1.4    {}括号,程序 ...

  3. 关于aspx 页面生成html 源码顶部空行不得不说的事儿

    原文引用自 http://www.360doc.com/content/12/0910/21/10504424_235418578.shtml 使用.aspx生成的页面一般都会有一个或多个空行,当然这 ...

  4. FusionCharts(v3.6.0)使用（1）

    前段时间做一个统计系统,需要画各种图表,于是找到了FusionCharts这个插件,功能甚是强大.在这个闲暇的春日午后,将这个插件的快速使用的方法写下来,方便懒得去官网看英文的朋友参考 安装 Fusi ...

  5. ACM编程网站

    ACM:ACM国际大学生程序设计竞赛(英文全称:ACM International Collegiate ProgrammingContest(ACM-ICPC或ICPC)是由美国计算机协会(ACM) ...

  6. spring注解方式实现定时器，并且cron表达式中不识别L的方法

    1.Spring的配置: <beans xmlns:task="http://www.springframework.org/schema/task" xsi:schemaL ...

  7. [PWA] 4. Hijacking Request

    We want to do offline first, the first thing we need to do is we should able to catch the browser re ...

  8. [Javascript] Writing conventional commits with commitizen

    Because semantic-release requires a specific message format, it's easier to follow this convention u ...

  9. [译]C++如何切分字符串

    声明: 翻译仅以技术学习和交流为目的,如需转载请务必标明原帖链接. http://stackoverflow.com/questions/236129/how-to-split-a-string-in ...

  10. C++之智能指针

    导读 一直对智能指针有一种神秘的赶脚,虽然平时没怎么用上智能指针,也就看过STL中的其中一种智能指针auto_ptr,但是一直好奇智能指针的设计因此,今天看了一下<C++ Primer Plus ...