一、创建节点

　　3步　　

　　1.创建空元素对象：

　　　　var newElem=document.createElement("标签名");

　　　　例如：var a=document.createElement("a");//<a></a>

　　2.设置必要属性

　　　　newElem.属性名="值";

　　　　newElem.innerHTML="文本";

　　　　例如：a.href="http://tmooc.cn";a.innerHTML="go to tmooc";

　　3.将元素对象挂载到指定父元素下(2种)

　　追加：parent.appendChild(newElem);

　　插入新元素：parent.insertBefore(newElem,oldElem);

　　强调：只有向已经在页面中的父元素追加新节点，才导致渲染

二、创建文档片段

　　文档片段：内存中，临时存储多个子节点的存储空间

　　减少渲染频率： 先将所有平级元素先追加到文档片段中,将文档片段一次性追加到父元素下.

　　var frag=new document.createDocumentFragment();

　　示例：动态创建表格

　　

 <!DOCTYPE HTML>

 <html>

 <head>

 <title>动态创建表格</title>

 <meta charset="utf-8" />

 <style>

     table{width:600px; border-collapse:collapse;

         text-align:center;

     }

     td,th{border:1px solid #ccc}

 </style>

 <script>

     //加入从服务器端收到json字符串如下：

     var json="[{'ename':'Tom','salary':5000,'age':25},{'ename':'John','salary':7000,'age':28},{'ename':'mary','salary':6000,'age':26}]";

     //使用eval函数，将json字符串，转化为程序中的对象

     var emps=eval('('+json+')');

     console.log(emps);

     //当页面加载后，在data div中创建table对象及子对象

     window.onload=function(){

         //step1:创建空table对象

         var table=document.createElement("table");

         //step2:添加表头行

         /*

             2.1创建空的tr对象，临时保存在tr中

             2.2创建3个空th对象，分别是 姓名 薪资 年龄

             2.3将三个th分别追加到tr对象下

             2.4将tr追加到table对象下

         */

         var tr=document.createElement("tr");

         var th1=document.createElement("th");

         th1.innerHTML="姓名";

         var th2=document.createElement("th");

         th2.innerHTML="薪资";

         var th3=document.createElement("th");

         th3.innerHTML="年龄";

         tr.appendChild(th1);

         tr.appendChild(th2);

         tr.appendChild(th3);

         table.appendChild(tr);

         //遍历emps数组，将数组中每个对象添加到table中

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

         {

             //建立一个tr元素

             var tr=document.createElement("tr");

             for (var x in emps[i])

             {

                 //设置td元素

                 var td=document.createElement("td");

                 if (x=="salary")

                 {

                     td.innerHTML="&yen;"+emps[i][x].toFixed(2);

                 }else{

                     td.innerHTML=emps[i][x];

                 }

                 //将td追加到tr中

                 tr.appendChild(td);

             }

             //将tr追加到table中

             table.appendChild(tr);

         }

         //Step2:找到data div,将table追加到data下

         document.querySelector("#data").appendChild(table);

     }

 </script>

 </head>

 <body>

     <div id="data"></div>

 </body>

 </html>

三、删除、替换节点

　　1.删除节点

　　　　parent.removeChild(oldElem);

　　　　oldElem.parentNode.removeChild(oldElem);

　　2.替换节点：parent.replaceChild(newElem,oldElem);

　　示例：联动菜单 自动添加和删除节点

 <!DOCTYPE HTML>

 <html>

 <head>

 <title>联动菜单</title>

 <meta charset="utf-8" />

 <script>

     /*使用 HTML DOM 的方式实现联动菜单*/

     var categories=[

 {"id":10,"name":'男装',"children":[

     {"id":101,"name":'正装'},

     {"id":102,"name":'T恤'},

     {"id":103,"name":'裤衩'}

 ]},

 {"id":20,"name":'女装',"children":[

     {"id":201,"name":'短裙'},

     {"id":202,"name":'连衣裙'},

     {"id":203,"name":'裤子',"children":[

         {"id":2031,"name":'长裤'},

         {"id":2031,"name":'九分裤'},

         {"id":2031,"name":'七分裤'}

     ]},

 ]},

 {"id":30,"name":'童装',"children":[

     {"id":301,"name":'帽子'},

     {"id":302,"name":'套装',"children":[

         {"id":3021,"name":"0-3岁"},

         {"id":3021,"name":"3-6岁"},

         {"id":3021,"name":"6-9岁"},

         {"id":3021,"name":"9-12岁"}

     ]},

     {"id":303,"name":'手套'}

 ]}

 ];

 //专门遍历一级分类 data保存当前同级分类的数组

 function loadData(data){

     //创建一个select对象

     //在select对象中追加一个新option，内容为请选择"-请选择-",值为0

     //遍历data中每个类别对象

     // 每遍历一个，就要在select中追加一个option，内容是当前对象的name属性值为当前对象的id属性

     //

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

     select.add(new Option("-请选择-",0));

     for (var key in data)

     {

         select.add(new Option(data[key].name,data[key].id));

     }

     //为新创建的select对象，添加onchange时间

     select.onchange=function(){

         //this-->select

         //将当前select后的元素都删除

         var parent=this.parentNode;

         while(parent.lastChild!=this){

             parent.removeChild(parent.lastChild);

         }

         /*

             获得和选中项位置对应的类别子对象

         */

         var category=data[this.selectedIndex-1];

         if(category!=undefined&&category.children){

             loadData(category.children);

         }

     }

     document.querySelector("#category").appendChild(select);

 }

 window.onload=function(){

     loadData(categories);

 }

 </script>

 </head>

 <body>

     <div id="category"></div>

 </body>

 </html>

DOM创建和删除节点的更多相关文章

  1. DOM创建和删除节点、HTML DOM常用对象[转]

    创建和删除节点:——核心DOM   1. 创建单个元素节点:3步:      1. 创建空元素节点对象:         var elem=document.createElement("标 ...

  2. 创建和删除节点：——核心DOM

    1. 创建单个元素节点:3步:       1. 创建空元素节点对象:          var elem=document.createElement("标签名");      ...

  3. DOM 创建元素 删除元素（结点）

    创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. <script> var para=document. ...

  4. jQuery – 7.动态创建Dom、删除节点

    动态创建Dom节点     1.使用$(html字符串)来创建Dom节点     2.append方法用来在元素的末尾追加元素     案例:动态生成网站列表     3.prepend,在元素的开始 ...

  5. jQuery里面的DOM操作（查找，创建，添加，删除节点）

    一:创建元素节点(添加) 创建元素节点并且把节点作为元素的子节点添加到DOM树上 append(): 在元素下添加元素 用法:$("id").append("定义的节点& ...

  6. JS DOM操作（创建、遍历、获取、操作、删除节点）

    创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...

  7. Query节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作

    一．创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...

  8. 节点操作-创建并添加&删除节点&替换&克隆节点

    <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" ...

  9. jQuery节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作

    一．创建节点 1 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div& ...

随机推荐

  1. 面试官常问的10个Linux问题

    1.如何暂停一个正在运行的进程,把其放在后台(不运行)? 为了停止正在运行的进程,让其再后台运行,我们可以使用组合键Ctrl+Z. 2.什么是安装Linux所需的最小分区数量,以及如何查看系统启动信息 ...

  2. leetcode笔记--3 Niim game

    question: You are playing the following Nim Game with your friend: There is a heap of stones on the ...

  3. iOS-合成图片(长图)

    合成图片 直接合成图片还是比较简单的,现在的难点是要把,通过文本输入的一些基本数据也合成到一张图片中,如果有多长图片就合成长图. 现在的实现方法是,把所有的文本消息格式化,然后绘制到一个UILable ...

  4. Android 上能提高学习工作效率的应用

    在知乎上有朋友问 Android 上能提高学习.工作效率的应用有哪些?我给他们的推荐获得了最多赞同.以后会不断完善更新此贴. Any.do :规划日程,各平台都有. Evernote:记笔记,各平台都 ...

  5. 《python核心编程第二版》第2章习题

    2-1 略 2-1 略 2-2 (a)打印 结果是9 (b)9 (c)一样 (d)略 (e)略 2-3 略 2-4 (a) # /usr/bin/pythonraw_input() (b) # /us ...

  6. 如何用Fiddler 拦住RestAssured发出的请求

    用RestAssured 发出的请求并不能直接被fiddler 拦截,可以在初始化的时候做出如下配置: RestAssured.proxy("localhost", 8888); ...

  7. Floatingip

    浮动IP相关功能点: 模块 功能 描述 备注 FloatingIP 创建浮动IP 指定带宽大小创建单个/多个浮动IP   指定子网.指定IP创建浮动IP   绑定浮动IP,修改带宽 绑定浮动IP到指定 ...

  8. Leetcode 678.有效的括号字符串

    有效的括号字符串 给定一个只包含三种字符的字符串:( ,) 和 *,写一个函数来检验这个字符串是否为有效字符串.有效字符串具有如下规则: 任何左括号 ( 必须有相应的右括号 ). 任何右括号 ) 必须 ...

  9. XML序列化器读取XML数据

    PS:标题我还真的不知道该怎么取比较好,大家将就下吧^_^ 场景:上周接到一个任务,要求我把ASP写的会员充值功能,用ASP.NET复制一遍,没有给我需求文档,就是让我根据代码去分析业务逻辑,然后看到 ...

  10. 【转】C++ const用法 尽可能使用const

    http://www.cnblogs.com/xudong-bupt/p/3509567.html C++ const 允许指定一个语义约束,编译器会强制实施这个约束,允许程序员告诉编译器某值是保持不 ...