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. Ancient Message (古埃及象形文字识别 Uva 1103)

    原题:https://uva.onlinejudge.org/external/11/1103.pdf 给一幅图(16进制), 判断图中有哪些象形文字. 只识别 这6个就可以 示例: 将16进制数据 ...

  2. hdu 4604 Deque(最长上升与下降子序列-能够重复)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4604 这个题解有点问题,暂时没时间改,还是参考别人的吧 #include <cstdio> ...

  3. hdoj 2085 核反应堆【水】

    核反应堆 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  4. listview 遇到问题java.lang.IndexOutOfBoundsException: Invalid index 0, size is 0

    开发的时候 遇到 java.lang.IndexOutOfBoundsException: Invalid index 0, size is 0 这个异常有时候会有,有时候正常 不太好捕捉 猜测 已经 ...

  5. Lucene多字段搜索

    最近在学习Lucene的过程中遇到了需要多域搜索并排序的问题,在网上找了找,资料不是很多,现在都列出来,又需要的可以自己认真看看,都是从其他网站粘贴过来的,所以比较乱,感谢原创的作者们!     使用 ...

  6. Android中关于Task的一些认识

    Android中Task是一个逻辑上的概念,简单地说,就是一个栈里面顺序存储着的多个Activity.这些Activity能够是来自同一个App,也能够是来自不同的Apps. Task的创建 比方之前 ...

  7. Android MVP框架模式

    结合前一篇MVC框架模式 为了更好地细分视图(View)与模型(Model)的功能,让View专注于处理数据的可视化以及与用户的交互,同时让Model只关系数据的处理,基于MVC概念的MVP(Mode ...

  8. [CSS3] Using CSS Combinators to Identify Siblings and Descendants in CSS

    CSS combinators allows us to reference the DOM relationship between two or more elements in CSS. < ...

  9. [Angular 2] @ngrx/devtools demo

    Check the Github: https://github.com/ngrx/devtools Example:

  10. LayoutInflater和inflate()方法的使用方法

    public static LayoutInflaterfrom(Context context) { LayoutInflaterLayoutInflater = (LayoutInflater)c ...