<!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. Linux学习Day3：新手必须掌握的Linux命令（二）

    今天学习的命令都是运维工作中经常要用到的,非常实用,必须要用心学习,争取把这些命令烂熟于心,具体内容如下: 一.系统状态监测命令 1.ifconfig命令 用于获取网卡配置与网络状态等信息. [roo ...

  2. 使用TensorRT对人脸检测网络MTCNN进行加速

    前言 最近在做人脸比对的工作,需要用到人脸关键点检测的算法,比较成熟和通用的一种算法是 MTCNN,可以同时进行人脸框选和关键点检测,对于每张脸输出 5 个关键点,可以用来进行人脸对齐. 问题 刚开始 ...

  3. 得心应用的Vue高级技巧---vue中文社区

    1,require.context()一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多 ...

  4. mysql常见问题解决方案

    属性顺序错误 一般情况下字段类型要放在前面,限制参数放在后面,UNSIGNEDZEROFILL 之间没有先后顺序,主键 KEY 和 auto_increment 要放在UNSIGNED ZEROFIL ...

  5. 菜鸟linux

    //查看系统中文件的使用情况 df -h //查看当前目录下各个文件及目录占用空间大小 du -sh *//查看当期端口使用情况netstat -tlpn //find命令详见--https://ww ...

  6. 【54】目标检测之Bounding Box预测

    Bounding Box预测(Bounding box predictions) 在上一篇笔记中,你们学到了滑动窗口法的卷积实现,这个算法效率更高,但仍然存在问题,不能输出最精准的边界框.在这个笔记中 ...

  7. junit 运行（eclipse + IDEA）

    记得刚用IDEA  开发的时候, 什么都还不熟,以为junit 运行还跟eclipse 一样, 结果试了后才知道是不一样的. 现在刚好写junit 相关的,也就都记录下来吧 Eclipse:eclip ...

  8. Go 与 PHP 的语法对比

    Go 是由 Google 设计的一门静态类型的编译型语言.它有点类似于 C,但是它包含了更多的优点,比如垃圾回收.内存安全.结构类型和并发性.它的并发机制使多核和网络机器能够发挥最大的作用.这是 Go ...

  9. hdu6162

    这题一开始把我看愣了.难道是线段树套树状数组?空间根本开不下好不好!!! 后来想到维护区间极值,从而排除不必要情况,降低复杂度. 无需修改,码量顿减…… 注意,同一组数据放一行,注意行末空格. #in ...

  10. 洛谷题解 P1592 【互质】

    原题传送门 题目描述 输入两个正整数n和k,求与n互质的第k个正整数. 输入格式 仅一行,为两个正整数n(≤10^6)和k(≤10^8). 输出格式 一个正整数,表示与n互质的第k个正整数. 输入输出 ...