<!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. centos7 字体库。vim乱码

    centos7 字体库.vim乱码 windows上传文件到centos,需要先使用dos2unix命令进行格式转换 先查看/usr/share下有没有这两个文件 没有的话yum -y install ...

  2. 【daily】文件分割限速下载,及合并分割文件

    说明 主要功能: 1) 分割文件, 生成下载任务; 2) 定时任务: 检索需要下载的任务, 利用多线程下载并限制下载速度; 3) 定时任务: 检索可合并的文件, 把n个文件合并为完整的文件. GitH ...

  3. c#中用office组件读取excel时提示异常来自 HRESULT:0x80010105 (RPC_E_SERVERFAULT)

    在excel2007,找到“excel选项”,点开后点击“加载项”,最下面有个管理加载项的下拉菜单,选“COM加载项”,点“转到”,这时会弹出一个框,把里面pdf软件的加载项前面的勾去掉,点确定就ok ...

  4. 简单的OO ALV显示ALV及下载

    REPORT OO_ALV. CLASS OO_ALV DEFINITION. PUBLIC SECTION. METHODS:GET_DATA IMPORTING AMOUNT TYPE I,&qu ...

  5. 初始socket编程

    服务端语法 import socket # 导入套接字模块# 生成一个socket对象进行网络编程操作server = socket.socket(family=socket.AF_INET, typ ...

  6. Django基础一Web框架的本质

    我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端,基于请求做出响应,客户都先请求,服务端做出对应的响应,按照http协议的请求协议发送请求, ...

  7. mongo shell

    mongo shell mongo 连接 本地 mongo # 连接127.0.0.1:27017 远程 mongo "mongodb://mongodb0.example.com:2801 ...

  8. 优酷爱奇艺视频转换为MP4格式工具

    本君今天分享两个免费的视频格式转换工具,分别是爱奇艺和优酷的(腾讯的有点复杂,等整理完再分享).教程都是一步步亲手操作的,每一步都有配图.希望各位老板多转发分享,谢谢! 一爱奇艺QSV转MP4格式 解 ...

  9. 剑指offer-面试题44-数字序列中某一位的数字-脑筋急转弯

    /* 题目: 数字以0123456789101112131415…的格式序列化到一个字符序列中. 在这个序列中,第5位(从0开始计数,即从第0位开始)是5,第13位是1,第19位是4,等等. 请写一个 ...

  10. element使用

    官方网址: 点击 全局使用 1.创建项目 vue init webpack vue-ele 配置 2.安装依赖 npm install 3.安装loader模块(开发) npm install sty ...