<!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>

        <link rel="stylesheet" type="text/css" href="style/css.css" />

        <script type="text/javascript">

            window.onload = function() {

                //创建一个"广州"节点,添加到#city下

                myClick("btn01",function(){

                    //创建广州节点 <li>广州</li>

                    //创建li元素节点

                    /*

                     * document.createElement()

                     *     可以用于创建一个元素节点对象，

                     *     它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，

                     *     并将创建好的对象作为返回值返回

                     */

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

                    //创建广州文本节点

                    /*

                     * document.createTextNode()

                     *     可以用来创建一个文本节点对象

                     *  需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回

                     */

                    var gzText = document.createTextNode("广州");

                    //将gzText设置li的子节点

                    /*

                     * appendChild()

                     *      - 向一个父节点中添加一个新的子节点

                     *      - 用法：父节点.appendChild(子节点);

                     */

                    li.appendChild(gzText);

                    //获取id为city的节点

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

                    //将广州添加到city下

                    city.appendChild(li);

                });

                //将"广州"节点插入到#bj前面

                myClick("btn02",function(){

                    //创建一个广州

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

                    var gzText = document.createTextNode("广州");

                    li.appendChild(gzText);

                    //获取id为bj的节点

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

                    //获取city

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

                    /*

                     * insertBefore()

                     *     - 可以在指定的子节点前插入新的子节点

                     *  - 语法：

                     *         父节点.insertBefore(新节点,旧节点);

                     */

                    city.insertBefore(li , bj);

                });

                //使用"广州"节点替换#bj节点

                myClick("btn03",function(){

                    //创建一个广州

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

                    var gzText = document.createTextNode("广州");

                    li.appendChild(gzText);

                    //获取id为bj的节点

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

                    //获取city

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

                    /*

                     * replaceChild()

                     *     - 可以使用指定的子节点替换已有的子节点

                     *     - 语法：父节点.replaceChild(新节点,旧节点);

                     */

                    city.replaceChild(li , bj);

                });

                //删除#bj节点

                myClick("btn04",function(){

                    //获取id为bj的节点

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

                    //获取city

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

                    /*

                     * removeChild()

                     *     - 可以删除一个子节点

                     *     - 语法：父节点.removeChild(子节点);

                     *

                     *         子节点.parentNode.removeChild(子节点);

                     */

                    //city.removeChild(bj);

                    bj.parentNode.removeChild(bj);

                });

                //读取#city内的HTML代码

                myClick("btn05",function(){

                    //获取city

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

                    alert(city.innerHTML);

                });

                //设置#bj内的HTML代码

                myClick("btn06" , function(){

                    //获取bj

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

                    bj.innerHTML = "昌平";

                });

                myClick("btn07",function(){

                    //向city中添加广州

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

                    /*

                     * 使用innerHTML也可以完成DOM的增删改的相关操作

                     * 一般我们会两种方式结合使用

                     */

                    //city.innerHTML += "<li>广州</li>";

                    //创建一个li

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

                    //向li中设置文本

                    li.innerHTML = "广州";

                    //将li添加到city中

                    city.appendChild(li);

                });

            };

            function myClick(idStr, fun) {

                var btn = document.getElementById(idStr);

                btn.onclick = fun;

            }

        </script>

    </head>

    <body>

        <div id="total">

            <div class="inner">

                <p>

                    你喜欢哪个城市?

                </p>

                <ul id="city">

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

                    <li>上海</li>

                    <li>东京</li>

                    <li>首尔</li>

                </ul>

            </div>

        </div>

        <div id="btnList">

            <div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>

            <div><button id="btn02">将"广州"节点插入到#bj前面</button></div>

            <div><button id="btn03">使用"广州"节点替换#bj节点</button></div>

            <div><button id="btn04">删除#bj节点</button></div>

            <div><button id="btn05">读取#city内的HTML代码</button></div>

            <div><button id="btn06">设置#bj内的HTML代码</button></div>

            <div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>

        </div>

    </body>

</html>

DOM增删改的更多相关文章

  1. JavaScript HTML DOM增删改查

    首先 js 可以修改HTML中的所有元素和属性,它还可以改变CSS样式,并且可以监听到所有事件并作出响应,这篇笔记呢 主要记录如何对HTML元素进行增删改查. 1 查找DOM 第一种方式是我们最常用的 ...

  2. DOM增删改替换

    一.在创建元素的时候为什么要把创建元素到也页面写到后面?   要求:创建一个div,在div中创建10个span. var div = document.createElement("div ...

  3. DOM增删改操作

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  4. 使用dom元素和jquery元素实现简单增删改的练习

    软件开发实际就是数据的增删改查,javascript前端开发也不例外.今天学了jquery框架的简单使用.于是用它实现简单的增删改,接着也用原始的javascript实现同样的功能,以便看出jquer ...

  5. 使用DOM进行xml文档的crud（增删改查）操作<操作详解>

    很多朋友对DOM有感冒,这里我花了一些时间写了一个小小的教程,这个能看懂,会操作了,我相信基于DOM的其它API(如JDOM,DOM4J等)一般不会有什么问题. 后附java代码,也可以下载(可点击这 ...

  6. 第 9 章 DOM 的增删改查

    DOM 的增删改查 本文不会详细讲解,只是简单提及知识要点,详细可以参考<dom高级编程>. 1. document.write document.write('<h1>创建节 ...

  7. js中script的上下放置区别 ， Dom的增删改创建

    回顾 javascript分为三部分: 1.ECMAScript5.0 es6(阮一峰) es7 es8 es6中有类的概念 声明变量 var let(es6中语法) 内置函数 Date Math.r ...

  8. DOM节点的增删改查

    在开始展开DOM操作前,首先需要构建一棵DOM树. <!DOCTYPE html> <html lang="en"> <head> <me ...

  9. HTML DOM(二)：节点的增删改查

    上一篇讲述了DOM的基本知识,从其得知,在DOM眼中,HTML的每个成分都可以看作是节点(文档节点.元素节点.文本节点.属性节点.注释节点,其中,属性节点是属于元素节点),本篇的内容就是通过DOM对这 ...

随机推荐

  1. IIS6的文件解析漏洞

    IIS6的默认配置漏洞会把cer.cdx.asa作为asp代码来解析 后缀解析漏洞 /test.asp;.jpg 或者/test.asp:.jpg(此处需抓包修改文件名) IIS6.0 都会把此类后缀 ...

  2. ts中的泛型

    /** * 泛型:软件工程中,我们不仅要创造定义良好的API,同时也要考虑可重用行,组件不仅能 * 够支持当前的数据类型,同时也能够支持未来数据类型. * 通俗理解:泛型就是解决类.接口.方法的复用性 ...

  3. P1843 奶牛晒衣服

    链接:Miku -------------------------------- 这是一道二分答案的题,我们要二分时间. 对于每件衣服,我们自然是能让它自己蒸发就自己蒸发,这样才是最优的. 那么我闷可 ...

  4. CSS3中新增的对文本和字体的设置

    文字阴影 text-shadow: 水平偏移 垂直偏移  模糊 颜色 兼容性:IE10+ <!DOCTYPE html> <html lang="en" mani ...

  5. excel的count、countif、sunif、if

    一.count统计数值个数 格式:count(指定区域)  , 例如:count(B2:G5) 二.countif统计数值满足条件个数 格式:COUNTIF(条件区域,指定条件)  ,例如:count ...

  6. 战“疫”背后的AI身影丨曼孚科技

    近期新型冠状病毒肺炎的疫情,牵动着全国上下人民的心. 截止2月11日上午10点,全国确诊人数已达42708人,疑似病例21675人. 突发的疫情让部分地区的快速诊疗能力出现了结构性的缺失,为了打赢这场 ...

  7. 解决Mac无法写入U盘问题

    注:本文出自博主 Chloneda:个人博客 | 博客园 | Github | Gitee | 知乎 本文源链接:https://www.cnblogs.com/chloneda/p/upan-to- ...

  8. 判定PDF文件是否能够正常打开

    下载iTextSharp.dll using iTextSharp.text.pdf; PdfReader reader = new PdfReader(strPath + "\\" ...

  9. Api跨域设置

    跨域设置:(服务端) webconfig文件中,system.webServer节点下添加 <!--跨域请求:三个配置信息--> <httpProtocol> <cust ...

  10. css样式的兼容性

    浏览器                 前缀 IE和safari             -webkit- Chrome                -ms- Firefox            ...