1.测试removeChild()方法： 删除节点
dom9.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

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

<title>Untitled Document</title>

<script type="text/javascript">

    //测试removeChild()方法： 删除节点

    window.onload = function() {

        /*         alert("1");

         var bjNode = document.getElementById("bj");

         bjNode.parentNode.removeChild(bjNode); */

        //为每个li添加一个confirm(确认对话框)：确定删除xx的信息吗，确定,则删除

        //         var falg = confirm("确定要删除吗?");

        //         alert(flag);

        var liNodes = document.getElementsByTagName("li");

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

            liNodes[i].onclick = function(){

                var flag = confirm("确定要删除"+this.firstChild.nodeValue+"的信息吗？");

                if (flag) {

                    this.parentNode.removeChild(this);

                }

            }

        }

    }

</script>

</head>

<body>

    <p>你喜欢哪个城市?</p>

    <ul id="city">

        <li id="bj" name="BeiJing">北京</li>

        <li>上海</li>

        <li>东京</li>

        <li>首尔</li>

    </ul>

    <br>

    <br>

    <p>你喜欢哪款单机游戏?</p>

    <ul id="game">

        <li id="rl">红警</li>

        <li>实况</li>

        <li>极品飞车</li>

        <li>魔兽</li>

    </ul>

    <br>

    <br> name：

    <input type="text" name="username" id="name" value="xiaoxiaolin">

</body>

</html>

2.练习

ex5.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

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

<title>Insert title here</title>

<script type="text/javascript">

/*

 * 为 #employeetable 的所有的 a 节点添加 Onclick 响应函数:

 * 1. 弹出确认对话框: 确定要删除 xx 的信息吗? xx 为当前 a 节点所在的 td 所在的 tr 的

 * 第一个 td 子节点的文本值, 且要去除前后空格.

 * 2. 若点击 "确认" , 则删除 a 节点的所在的 行

 *

 * 注意:

 * 1. a 节点是一个超级链接, 可以在其 onclick 事件中通过返回 false, 来取消默认行为

 * 2. tr 的直接父节点为 tbody, 而不是 table

 * 3. 可以把去除前后空格的代码写成一个 trim(str) 函数.

 *

 * 为 #addEmpButton 添加 onclick 响应函数:

 * 1. 获取 #name, #email, #salary 的文本框的值

 * 2. 利用 1 获取的文本值创建 3 个 td 节点, 在创建一个 tr 节点. 并把以上的 3 个 td

 *    节点价位 tr 节点的子节点

    <tr>

        <td>Tom</td>

        <td>tom@tom.com</td>

        <td>5000</td>

    </tr>

 * 3. 在创建一个 td 节点: <td><a href="deleteEmp?id=xxx">Delete</a></td>

 * 4. 把 3 创建的 td 也加为 tr 的子节点.

 * 5. 再把 tr 加为 #employeetable 的 tbody 子节点的子节点.

 * 6. 为新创建的 tr 的 a 子节点添加 Onclick 响应函数, 使其也具备删除的功能.

 *

 */

 window.onload = function(){

     function removeTr(aNoe){

         var trNode = aNoe.parentNode.parentNode;

         var textContent = trNode.getElementsByTagName("td")[0]

                                 .firstChild.nodeValue;

         textContent = trim(textContent);

         var flag = confirm("确定要删除" + textContent + "的信息吗?");

         if(flag){

             trNode.parentNode.removeChild(trNode);

         }

         return false;

     }

          var aNodes = document.getElementById("employeetable")

                          .getElementsByTagName("a");

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

         aNodes[i].onclick = function(){

             removeTr(this);

             return false;

         }

     }

     document.getElementById("addEmpButton").onclick = function(){

         var nameVal = document.getElementById("name").value;

         var emailVal = document.getElementById("email").value;

         var salaryVal = document.getElementById("salary").value;

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

         nameTd.appendChild(document.createTextNode(nameVal));

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

         emailTd.appendChild(document.createTextNode(emailVal));

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

         salaryTd.appendChild(document.createTextNode(salaryVal));

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

         tr.appendChild(nameTd);

         tr.appendChild(emailTd);

         tr.appendChild(salaryTd);

         alert("aa");

         //<td><a href="deleteEmp?id=xxx">Delete</a></td>

         var aNode = document.createElement("a");

         aNode.href = "deleteEmp?id=xxx";

         aNode.appendChild(document.createTextNode("Delete"));

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

         aTd.appendChild(aNode);

         tr.appendChild(aTd);

         aNode.onclick = function(){

             removeTr(this);

             return false;

         }

         document.getElementById("employeetable")

                 .getElementsByTagName("tbody")[0]

                 .appendChild(tr);

         //value: 用于获取 html 表单元素的值

         //alert(this.value); //

         //nodeValue: 用于获取文本节点的文本值.

         //alert(this.nodeValue); //null

     }

     function trim(str){

         var reg = /^\s*|\s*$/g;

         return str.replace(reg, "");

     }

 }

</script>

</head>

<body>

    <center>

        <br> <br> 添加新员工 <br> <br> name: <input type="text"

            name="name" id="name" />&nbsp;&nbsp; email: <input type="text"

            name="email" id="email" />&nbsp;&nbsp; salary: <input type="text"

            name="salary" id="salary" /> <br> <br>

        <button id="addEmpButton" value="abc">Submit</button>

        <br> <br>

        <hr>

        <br> <br>

        <table id="employeetable" border="1" cellpadding="5" cellspacing=0>

            <tbody>

                <tr>

                    <th>Name</th>

                    <th>Email</th>

                    <th>Salary</th>

                    <th>&nbsp;</th>

                </tr>

                <tr>

                    <td>Tom</td>

                    <td>tom@tom.com</td>

                    <td>5000</td>

                    <td><a href="deleteEmp?id=001">Delete</a></td>

                </tr>

                <tr>

                    <td>

                        Jerry

                    </td>

                    <td>jerry@sohu.com</td>

                    <td>8000</td>

                    <td><a href="deleteEmp?id=002">Delete</a></td>

                </tr>

                <tr>

                    <td>Bob</td>

                    <td>bob@tom.com</td>

                    <td>10000</td>

                    <td><a href="deleteEmp?id=003">Delete</a></td>

                </tr>

            </tbody>

        </table>

    </center>

</body>

</html>

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

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

②自定义 insertAfter() 方法

demo10.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

    <head>

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

        <title>Untitled Document</title>

        <script type="text/javascript">

            //测试 insertBefore() 插入节点

            //该方法除了进行插入外, 还有移动节点的功能.

            window.onload = function(){

                alert("abc");

                //1. 把 #rl 插入到  #bj 节点的前面

                var cityNode = document.getElementById("city");

                var bjNode = document.getElementById("bj");

                var rlNode = document.getElementById("rl");

                //cityNode.insertBefore(rlNode, bjNode);                

                //var refNode = document.getElementById("se");

                var refNode = document.getElementById("dj");

                insertAfter(rlNode, refNode);

            }

            //把 newNode 插入到 refNode 的后面

            function insertAfter(newNode, refNode){

                //1. 测试 refNode 是否为其父节点的最后一个子节点

                var parentNode = refNode.parentNode;

                if(parentNode){

                    var lastNode = parentNode.lastChild;

                    //2. 若是: 直接把 newNode 插入为 refNode 父节点的最后一个子节点.

                    if(refNode == lastNode){

                        parentNode.appendChild(newNode);

                    }

                    //3. 若不是: 获取 refNode 的下一个兄弟节点, 然后插入到其下一个兄弟

                    //节点的前面.

                    else{

                        var nextNode = refNode.nextSibling;

                        parentNode.insertBefore(newNode, nextNode);

                    }

                }

            }

        </script>

    </head>

    <body>

        <p>你喜欢哪个城市?</p>

        <ul id="city"><li id="bj" name="BeiJing">北京</li>

            <li>上海</li>

            <li id="dj">东京</li>

            <li id="se">首尔</li>

        </ul>

        <br><br>

        <p>你喜欢哪款单机游戏?</p>

        <ul id="game">

            <li id="rl">红警</li>

            <li>实况</li>

            <li>极品飞车</li>

            <li>魔兽</li>

        </ul>

        <br><br>

        gender:

            <input type="radio" name="gender" value="male"/>Male

            <input type="radio" name="gender" value="female"/>Female

        <br><br>

        name: <input type="text" name="username" value="atguigu"/>

    </body>

</html>

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

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

        <script type="text/javascript">

            //测试 innerHTML 属性

            window.onload = function(){

                var cityNode = document.getElementById("city");

                alert(cityNode.innerHTML);

                //互换 #city 节点和 #game 节点中的内容.

                var tempHTML = cityNode.innerHTML;

                var gameNode = document.getElementById("game");

                cityNode.innerHTML = gameNode.innerHTML;

                gameNode.innerHTML = tempHTML;

            }

        </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. H - Food HDU - 4292 网络流

    题目   You, a part-time dining service worker in your college’s dining hall, are now confused with a n ...

  2. 循环结构（for、while）

    3.4用for语句实现循环结构 什么是循环结构 for语句 1．什么是循环结构? 循环结构又称为重复结构,是利用计算机运算速度快以及能进行逻辑控制的特点来重复执行某些操作.重复执行的部分称为循环体. ...

  3. pyltp安装教程及简单使用

    1.pyltp简介 pyltp 是哈工大自然语言工作组推出的一款基于Python 封装的自然语言处理工具(轮子),提供了分词,词性标注,命名实体识别,依存句法分析,语义角色标注的功能. 2.pyltp ...

  4. SwiftUI - 一起来仿写微信APP之一首页列表视图

    简介 最近在学习 SwiftUI ,我一般都是先去学习界面布局,所以就想着仿写一下经常使用的软件的界面,所以先拿微信开刀.因为不想一次性发太多的内容,所以只好将主题分解,一部分一部分地去讲,接下来我们 ...

  5. ArrayList扩容机制实探

    ArrayList初始化 问题:执行以下代码后,这个list的列表大小(size)和容量(capacity)分别是多大? List<String> list = new ArrayList ...

  6. [hdu1533]二分图最大权匹配 || 最小费用最大流

    题意:给一个n*m的地图,'m'表示人,'H'表示房子,求所有人都回到房子所走的距离之和的最小值(距离为曼哈顿距离). 思路:比较明显的二分图最大权匹配模型,将每个人向房子连一条边,边权为曼哈顿距离的 ...

  7. [codeforces-543-D div1]树型DP

    题意:给一棵树的边标上0或1,求以节点i为源点,其它点到i的唯一路径上的1的边数不超过1条的方案数,输出所有i的答案. 思路:令f[i]表示以节点i为源点,只考虑子树i时的方案数,ans[i]为最后答 ...

  8. 关于日常操作中sql的性能

    最近接手了一个项目.使用的数据库是sql server,但是遇到一些关于日期的查询的时候,查询结果非常慢.看了下别人的sql //sql = sql + " and CONVERT(nvar ...

  9. 进程和线程—Python多线程编程

    进程和线程 进程 进程是一个执行中的程序.每个进程都拥有自己的地址空间.内存.数据栈以及其它用于跟踪执行的辅助数据. 一个程序运行就是一个进程(比如 QQ.微信或者其它软件): 进程可以通过派生新的进 ...

  10. centos下mysql 看不到mysql数据库（密码无法更改）

    1.这可能是因为mysql数据库的user表里,存在用户名为空的账户即匿名账户,导致登录的时候是虽然用的是root,但实际是匿名登录的 2.解决方案 2.1.关闭mysql service mysql ...