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. sql server 2008有关SQL的模糊查询

    执行 数据库查询时,有完整查询和模糊查询之分. 一般模糊语句如下: SELECT 字段 FROM 表 WHERE 某字段 Like 条件 其中关于条件,SQL提供了四种匹配模式: 1,%:表示任意0个 ...

  2. excel时会弹出向程序发送命令时出现问题的提示框

    出现此问题需要做两个操作来解决: 1.在开始所有程序中找到Microsoft Excel 2007的运行程序,右键选择属性,在兼容性标签将“以管理员身份运行此程序”的勾去掉. 2.在打开的Excel程 ...

  3. 查看 AndroidManifest.xml文件

    1.Manifest Explorer 装在Android手机中,用此apk看系统中已安装应用的AndroidManifest.xml文件: protected boolean configForPa ...

  4. Android吧数据保存成xml文件

    public class MainActivity extends Activity { private List<Person> persons; @Override protected ...

  5. 《University Calculus》-chaper8-无穷序列和无穷级数-等比级数

    前言:其实无穷序列和无穷级数和数列{an}以及我们接触微积分就给出的极限概念lim有着紧密的联系,它对于我们在具体的问题当中进行建模和数据分析有着非常重要的作用. 无穷序列: 最简单的一种说法,就是一 ...

  6. Period II - FZU 1901(KMP->next)

    题目大意:给你一个字符串 S ,N = |S|,如果存在一个 P (1<=P<=N),并且满足 s[i] = s[P+i] (i = {0...N-P-1} ),求出来所有的 P 然后输出 ...

  7. E - Currency Exchange

    题目大意: 汇率问题,有N个银行,他们之间有一些汇率,某个人手里面拿着其中一种钱,然后在这里面兑换钱币,当然兑换是有汇率和手续费的,然后经过一系列兑换后问手里面的钱是不是能增加? ;; i<le ...

  8. poj 1458 Common Subsequence【LCS】

    Common Subsequence Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 43132   Accepted: 17 ...

  9. Web项目初始化过程

    在启动Web项目时,容器(比如Tomcat)会读web.xml配置文件中的两个节点<listener>和<contex-param>. 接着容器会创建一个ServletCont ...

  10. 1.1GTK+ 的简单程序HelloWorld

    1.1GTK+ 的简单程序HelloWorld 编译执行如图所看到的: