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. Monthly Expense(二分)

    Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 11196   Accepted: 4587 Description Farm ...

  2. 【转】Java运算符优先级

    原文网址:http://www.cnblogs.com/gw811/archive/2012/10/13/2722752.html Java运算符优先级 序列号 符号 名称 结合性(与操作数) 目数 ...

  3. 数学（逆元）：BZOJ 2186: [Sdoi2008]沙拉公主的困惑

    2186: [Sdoi2008]沙拉公主的困惑 Description 大富翁国因为通货膨胀,以及假钞泛滥,政府决定推出一项新的政策:现有钞票编号范围为1到N的阶乘,但是,政府只发行编号与M!互质的钞 ...

  4. 暴力求解——除法 Division,UVa 725

    Description Write a program that finds and displays all pairs of 5-digit numbers that between them u ...

  5. C#读写共享文件夹

    该试验分以下步骤: 1.在服务器设置一个共享文件夹,在这里我的服务器ip地址是10.80.88.180,共享文件夹名字是test,test里面有两个文件:good.txt和bad.txt,访问权限,用 ...

  6. XMPPFrameWork IOS 开发（一）xmpp简介

    原始地址:XMPPFrameWork IOS 开发(一) XMPP : The Extensible Messaging and Presence Protocol 中文全称: 可扩展通讯和表示协议 ...

  7. Android使用Linux mount获取SdCard存储文件夹

    Android的智能手机各不同样.如今非常多Android智能手机都是自带存储,有的还带有扩展内存的Sdcard卡槽. 在Android开发中,非常多时候依据Android提供的获取SdCard存储方 ...

  8. 全球最低功耗蓝牙单芯片（DA14580）系统架构和应用开发框架分析

    DA14580是Dialog公司研制的蓝牙单芯片,号称全球功耗最低,是TI CC2541的四分之一,是运动手环等穿戴类电子产品的常用芯片.但是DA14580的开发门槛不低,适合有蓝牙开发经验的团队来开 ...

  9. js中return false，return，return true的使用方法及区别

    起首return作为返回keyword,他有下面两种返回体式格式 1.返回把握与函数成果 语法为:return 表达式; 语句停止函数履行,返回调用函数,而且把表达式的值作为函数的成果 2.返回把握无 ...

  10. 《Head First 设计模式》学习笔记——工厂模式 + 抽象工厂模式

    设计模式 工厂模式:定义一个创建对象的接口,但由子类决定要实例化的是哪一个.工厂方法让类把实例化推迟到子类. 所谓的"决定",并非指模式同意子类本身在执行时做决定,而是指在编写创建 ...