1. 1.测试removeChild()方法： 删除节点
    dom9.html
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Untitled Document</title>
  6.  
  7. <script type="text/javascript">
  8.     //测试removeChild()方法： 删除节点
  9.     window.onload = function() {
  10.         /*         alert("1");
  11.          var bjNode = document.getElementById("bj");
  12.          bjNode.parentNode.removeChild(bjNode); */
  13.         //为每个li添加一个confirm(确认对话框)：确定删除xx的信息吗，确定,则删除
  14.         //         var falg = confirm("确定要删除吗?");
  15.         //         alert(flag);
  16.  
  17.         var liNodes = document.getElementsByTagName("li");
  18.         for (var i = 0; i < liNodes.length; i++) {
  19.             liNodes[i].onclick = function(){
  20.                 var flag = confirm("确定要删除"+this.firstChild.nodeValue+"的信息吗？");
  21.                 if (flag) {
  22.                     this.parentNode.removeChild(this);
  23.                 }
  24.             }
  25.         }
  26.     }
  27. </script>
  28.  
  29. </head>
  30. <body>
  31.     <p>你喜欢哪个城市?</p>
  32.     <ul id="city">
  33.         <li id="bj" name="BeiJing">北京</li>
  34.         <li>上海</li>
  35.         <li>东京</li>
  36.         <li>首尔</li>
  37.     </ul>
  38.  
  39.     <br>
  40.     <br>
  41.     <p>你喜欢哪款单机游戏?</p>
  42.     <ul id="game">
  43.         <li id="rl">红警</li>
  44.         <li>实况</li>
  45.         <li>极品飞车</li>
  46.         <li>魔兽</li>
  47.     </ul>
  48.  
  49.     <br>
  50.     <br> name：
  51.     <input type="text" name="username" id="name" value="xiaoxiaolin">
  52. </body>
  53. </html>

2.练习

ex5.html

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Insert title here</title>
  6. <script type="text/javascript">
  7.  
  8. /*
  9.  * 为 #employeetable 的所有的 a 节点添加 Onclick 响应函数:
  10.  * 1. 弹出确认对话框: 确定要删除 xx 的信息吗? xx 为当前 a 节点所在的 td 所在的 tr 的
  11.  * 第一个 td 子节点的文本值, 且要去除前后空格.
  12.  * 2. 若点击 "确认" , 则删除 a 节点的所在的 行
  13.  *
  14.  * 注意:
  15.  * 1. a 节点是一个超级链接, 可以在其 onclick 事件中通过返回 false, 来取消默认行为
  16.  * 2. tr 的直接父节点为 tbody, 而不是 table
  17.  * 3. 可以把去除前后空格的代码写成一个 trim(str) 函数.
  18.  *
  19.  * 为 #addEmpButton 添加 onclick 响应函数:
  20.  * 1. 获取 #name, #email, #salary 的文本框的值
  21.  * 2. 利用 1 获取的文本值创建 3 个 td 节点, 在创建一个 tr 节点. 并把以上的 3 个 td
  22.  *    节点价位 tr 节点的子节点
  23.     <tr>
  24.         <td>Tom</td>
  25.         <td>tom@tom.com</td>
  26.         <td>5000</td>
  27.     </tr>
  28.  * 3. 在创建一个 td 节点: <td><a href="deleteEmp?id=xxx">Delete</a></td>
  29.  * 4. 把 3 创建的 td 也加为 tr 的子节点.
  30.  * 5. 再把 tr 加为 #employeetable 的 tbody 子节点的子节点.
  31.  * 6. 为新创建的 tr 的 a 子节点添加 Onclick 响应函数, 使其也具备删除的功能.
  32.  *
  33.  */
  34.  
  35.  window.onload = function(){
  36.  
  37.      function removeTr(aNoe){
  38.          var trNode = aNoe.parentNode.parentNode;
  39.          var textContent = trNode.getElementsByTagName("td")[0]
  40.                                  .firstChild.nodeValue;
  41.          textContent = trim(textContent);
  42.          var flag = confirm("确定要删除" + textContent + "的信息吗?");
  43.          if(flag){
  44.              trNode.parentNode.removeChild(trNode);
  45.          }
  46.          return false;
  47.      }
  48.           var aNodes = document.getElementById("employeetable")
  49.                           .getElementsByTagName("a");
  50.      for(var i = 0; i < aNodes.length; i++){
  51.          aNodes[i].onclick = function(){
  52.              removeTr(this);
  53.              return false;
  54.          }
  55.      }
  56.  
  57.      document.getElementById("addEmpButton").onclick = function(){
  58.  
  59.          var nameVal = document.getElementById("name").value;
  60.          var emailVal = document.getElementById("email").value;
  61.          var salaryVal = document.getElementById("salary").value;
  62.  
  63.          var nameTd = document.createElement("td");
  64.          nameTd.appendChild(document.createTextNode(nameVal));
  65.  
  66.          var emailTd = document.createElement("td");
  67.          emailTd.appendChild(document.createTextNode(emailVal));
  68.  
  69.          var salaryTd = document.createElement("td");
  70.          salaryTd.appendChild(document.createTextNode(salaryVal));
  71.  
  72.          var tr = document.createElement("tr");
  73.  
  74.          tr.appendChild(nameTd);
  75.          tr.appendChild(emailTd);
  76.          tr.appendChild(salaryTd);
  77.  
  78.          alert("aa");
  79.  
  80.          //<td><a href="deleteEmp?id=xxx">Delete</a></td>
  81.          var aNode = document.createElement("a");
  82.          aNode.href = "deleteEmp?id=xxx";
  83.          aNode.appendChild(document.createTextNode("Delete"));
  84.          var aTd = document.createElement("td");
  85.          aTd.appendChild(aNode);
  86.  
  87.          tr.appendChild(aTd);
  88.  
  89.          aNode.onclick = function(){
  90.              removeTr(this);
  91.              return false;
  92.          }
  93.  
  94.          document.getElementById("employeetable")
  95.                  .getElementsByTagName("tbody")[0]
  96.                  .appendChild(tr);
  97.  
  98.          //value: 用于获取 html 表单元素的值
  99.          //alert(this.value); //
  100.          //nodeValue: 用于获取文本节点的文本值.
  101.          //alert(this.nodeValue); //null
  102.  
  103.      }
  104.  
  105.      function trim(str){
  106.          var reg = /^\s*|\s*$/g;
  107.          return str.replace(reg, "");
  108.      }
  109.  
  110.  }
  111.  
  112. </script>
  113. </head>
  114. <body>
  115.  
  116.     <center>
  117.         <br> <br> 添加新员工 <br> <br> name: <input type="text"
  118.             name="name" id="name" />&nbsp;&nbsp; email: <input type="text"
  119.             name="email" id="email" />&nbsp;&nbsp; salary: <input type="text"
  120.             name="salary" id="salary" /> <br> <br>
  121.         <button id="addEmpButton" value="abc">Submit</button>
  122.         <br> <br>
  123.         <hr>
  124.         <br> <br>
  125.         <table id="employeetable" border="1" cellpadding="5" cellspacing=0>
  126.             <tbody>
  127.                 <tr>
  128.                     <th>Name</th>
  129.                     <th>Email</th>
  130.                     <th>Salary</th>
  131.                     <th>&nbsp;</th>
  132.                 </tr>
  133.                 <tr>
  134.                     <td>Tom</td>
  135.                     <td>tom@tom.com</td>
  136.                     <td>5000</td>
  137.                     <td><a href="deleteEmp?id=001">Delete</a></td>
  138.                 </tr>
  139.                 <tr>
  140.                     <td>
  141.                         Jerry
  142.                     </td>
  143.                     <td>jerry@sohu.com</td>
  144.                     <td>8000</td>
  145.                     <td><a href="deleteEmp?id=002">Delete</a></td>
  146.                 </tr>
  147.                 <tr>
  148.                     <td>Bob</td>
  149.                     <td>bob@tom.com</td>
  150.                     <td>10000</td>
  151.                     <td><a href="deleteEmp?id=003">Delete</a></td>
  152.                 </tr>
  153.             </tbody>
  154.         </table>
  155.     </center>
  156.  
  157. </body>
  158. </html>

3 插入节点:
          ① insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面
                                       var reference = element.insertBefore(newNode,targetNode);
                                      节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面.

节点 targetNode 必须是 element 元素的一个子节点。

②自定义 insertAfter() 方法

demo10.html

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.         <title>Untitled Document</title>
  6.  
  7.         <script type="text/javascript">
  8.  
  9.             //测试 insertBefore() 插入节点
  10.             //该方法除了进行插入外, 还有移动节点的功能.
  11.             window.onload = function(){
  12.  
  13.                 alert("abc");
  14.  
  15.                 //1. 把 #rl 插入到  #bj 节点的前面
  16.  
  17.                 var cityNode = document.getElementById("city");
  18.                 var bjNode = document.getElementById("bj");
  19.                 var rlNode = document.getElementById("rl");
  20.  
  21.                 //cityNode.insertBefore(rlNode, bjNode);                
  22.  
  23.                 //var refNode = document.getElementById("se");
  24.                 var refNode = document.getElementById("dj");
  25.                 insertAfter(rlNode, refNode);
  26.             }
  27.  
  28.             //把 newNode 插入到 refNode 的后面
  29.             function insertAfter(newNode, refNode){
  30.                 //1. 测试 refNode 是否为其父节点的最后一个子节点
  31.                 var parentNode = refNode.parentNode;
  32.                 if(parentNode){
  33.                     var lastNode = parentNode.lastChild;
  34.  
  35.                     //2. 若是: 直接把 newNode 插入为 refNode 父节点的最后一个子节点.
  36.                     if(refNode == lastNode){
  37.                         parentNode.appendChild(newNode);
  38.                     }
  39.                     //3. 若不是: 获取 refNode 的下一个兄弟节点, 然后插入到其下一个兄弟
  40.                     //节点的前面.
  41.                     else{
  42.                         var nextNode = refNode.nextSibling;
  43.                         parentNode.insertBefore(newNode, nextNode);
  44.                     }
  45.                 }
  46.             }
  47.  
  48.         </script>
  49.  
  50.     </head>
  51.     <body>
  52.         <p>你喜欢哪个城市?</p>
  53.         <ul id="city"><li id="bj" name="BeiJing">北京</li>
  54.             <li>上海</li>
  55.             <li id="dj">东京</li>
  56.             <li id="se">首尔</li>
  57.         </ul>
  58.  
  59.         <br><br>
  60.         <p>你喜欢哪款单机游戏?</p>
  61.         <ul id="game">
  62.             <li id="rl">红警</li>
  63.             <li>实况</li>
  64.             <li>极品飞车</li>
  65.             <li>魔兽</li>
  66.         </ul>
  67.  
  68.         <br><br>
  69.         gender:
  70.             <input type="radio" name="gender" value="male"/>Male
  71.             <input type="radio" name="gender" value="female"/>Female
  72.  
  73.         <br><br>
  74.         name: <input type="text" name="username" value="atguigu"/>
  75.  
  76.     </body>
  77. </html>

4.innerHTML属性:
           浏览器几乎都支持该属性, 但不是 DOM 标准的组成部分.

innerHTML 属性可以用来读, 写某给定元素里的 HTML 内容

  1.         <script type="text/javascript">
  2.  
  3.             //测试 innerHTML 属性
  4.             window.onload = function(){
  5.                 var cityNode = document.getElementById("city");
  6.                 alert(cityNode.innerHTML);
  7.  
  8.                 //互换 #city 节点和 #game 节点中的内容.
  9.                 var tempHTML = cityNode.innerHTML;
  10.                 var gameNode = document.getElementById("game");
  11.  
  12.                 cityNode.innerHTML = gameNode.innerHTML;
  13.                 gameNode.innerHTML = tempHTML;
  14.             }
  15.  
  16.         </script>

删除节点与插入节点 & innerHTML的更多相关文章

  1. jQuery中的查找节点、创建节点、插入节点、删除节点、替换节点、复制节点操作方法

    jQuery操作节点我们可以分六点来讲,查找节点.创建节点.插入节点.删除节点.替换节点.复制节点. 一.查找节点 text() - 设置或返回所选元素的文本内容   ,html() - 设置或返回所 ...

  2. JQuery_DOM 节点操作之创建节点、插入节点

    一.创建节点 为了使页面更加智能化,有时我们想动态的在html 结构页面添加一个元素标签,那么在插入之前首先要做的动作就是:创建节点 <script type="text/javasc ...

  3. JQ 添加节点和插入节点的方法总结

    转载来源:http://blog.csdn.net/ss1106404013/article/details/49274345 添加节点的jQuery方法: append().prepend().ap ...

  4. C语言实现双向链表删除节点、插入节点、双向输出等操作

    #include<cstdio> #include<cstdlib> typedef struct DoubleLinkedList { int data; struct Do ...

  5. [javaSE] 数据结构（二叉查找树-插入节点）

    二叉查找树(Binary Search Tree),又被称为二叉搜索树,它是特殊的二叉树,左子树的节点值小于右子树的节点值. 定义二叉查找树 定义二叉树BSTree,它保护了二叉树的根节点BSTNod ...

  6. 插入节点insertBefore()

    http://www.imooc.com/code/1699 插入节点insertBefore() insertBefore() 方法可在已有的子节点前插入一个新的子节点. 语法: insertBef ...

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

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

  8. C#中操作xml文件（插入节点、修改、删除）

    已知有一个xml文件(bookstore.xml)如下: <?xml version="1.0" encoding="gb2312"?> <b ...

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

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

随机推荐

  1. 配置中心Apollo搭建全过程

    总体架构 用户在Portal操作配置发布 Portal调用Admin Service的接口操作发布 Admin Service发布配置后,发送ReleaseMessage给各个Config Servi ...

  2. Find Minimum in Rotated Sorted Array(旋转数组的最小数字)

    题目描述: Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., might become ...

  3. C# 基础知识系列- 16 开发工具篇

    0. 前言 这是C# 基础知识系列的最后一个内容讲解篇,下一篇是基础知识-实战篇.这一篇主要讲解一下C#程序的结构和主要编程工具. 1. 工具 工欲善其事必先利其器,在实际动手之前我们先来看看想要编写 ...

  4. html之表单元素form

    表单元素form \(都是嵌套input标签来实现,其中type属性选择不同则不同\) \(text:文本内容(输入内容可见)\) \(password:密码(输入内容不可见)\) \(submit: ...

  5. 201771030125-王英雪 实验一 软件工程准备一<构建之法与博客首秀>

    项目 内容 班级博客 点我呀! 作业要求 看这里! 课程学习目标 提出三个问题并以写博客的形式记录下来 参考文献 现代软件工程讲义 三个问题 问题一:软件工程究竟是什么? 在现代软件工程讲义一书中给出 ...

  6. php时间输出结果减去一分钟

    如: <?=date("m-d H:i",strtotime($rs["kgtime"]));?> 假设结果是09-03-23:30,如何让它变成0 ...

  7. Angular 从入坑到挖坑 - Router 路由使用入门指北

    一.Overview Angular 入坑记录的笔记第五篇,因为一直在加班的缘故拖了有一个多月,主要是介绍在 Angular 中如何配置路由,完成重定向以及参数传递.至于路由守卫.路由懒加载等&quo ...

  8. python重试次数装饰器

    目录 重试次数装饰器 重试次数装饰器 前言, 最近在使用tornado框架写Restful API时遇到很多的问题. 有框架的问题, 有异步的问题. 虽然tornado 被公认为当前python语言最 ...

  9. C++17结构化绑定

    动机 std::map<K, V>的insert方法返回std::pair<iterator, bool>,两个元素分别是指向所插入键值对的迭代器与指示是否新插入元素的布尔值, ...

  10. springmvc 校验--JSR

    1.使用JSR规范是简单使用的,如果使用hibernate校验则需要在工程中添加hibernate-validate.jar,以及其他依赖的jar包. 2,在mvc配置文件中使用<mvc:ann ...