<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       /* *{
            margin:0;
            padding:0;
        }*/
        #total{
            width:400px;
            border:1px solid black;
            margin:0 auto;
        }
        #city li{
            list-style: none;
            float: left;
            margin-left:20px;
            margin-bottom: 20px;
            border:1px solid black;
            background-color: #ff6700;
        }
        /*解决高度塌陷问题*/
        .clearfix::before,.clearfix::after{
            Content:"";
            Display:table;
            Clear:both
        }
        .btnList button{
            margin-top: 20px;
            width:300px;
        }
    </style>
</head>
<body>
<div id="total" class="clearfix">
    <div id="inner">
        <p>你喜欢哪个城市？</p>
        <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li>天津</li>
            <li>杭州</li>
        </ul>
    </div>
</div>
<div class="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中添加广州-方法1</button></div>
    <div><button  id="btn08">向city中添加广州-方法2</button></div>
</div>
</body>
</html>
<script>
    function myClick(idStr,fun) {
        var btn=document.getElementById(idStr);
        btn.onclick=fun;
    }
    //创建一个“广州”节点添加到#city下
myClick("btn01",function () {
//创建广州节点<li>广州</li>
    //创建li元素节点
    var li=document.createElement("li");
    //创建文本节点
    var cityText=document.createTextNode("广州");
    //将广州子节点添加到li中
    li.appendChild(cityText);
    //获取id为city的节点
    var city=document.getElementById("city");
    //将广州添加到city下
    city.appendChild(li);
});

    //将“广州”节点插入到#bj前面
    //先绑定按钮2
    myClick("btn02",function () {
    //创建一个广州节点
        var li=document.createElement("li");
        var cityText=document.createTextNode("广州");
        li.appendChild(cityText);
        //获取北京的节点id,必须父节点调用
        // 用法： 旧节点的父节点.insertBefore(新节点，旧节点)
        var bj=document.getElementById("bj");
        var city=document.getElementById("city");
        city.insertBefore(li,bj);
    });

    //使用“广州”节点替换#bj节点
myClick("btn03",function () {
    //创建一个广州节点
    var li=document.createElement("li");
    var cityText=document.createTextNode("广州");
    li.appendChild(cityText);
    //获取北京节点和其父节点
    var bj=document.getElementById("bj");
    var city=document.getElementById("city");
    //替换北京节点
    // 用法： 旧节点的父节点.replaceChild(新节点，旧节点)
    city.replaceChild(li,bj);
});

    // 删除#bj节点
myClick("btn04",function () {
    var bj=document.getElementById("bj");
    var city=document.getElementById("city");
    // 用法： 父节点.removeChild(删除子节点);
   //方法一：city.removeChild(bj);
    //方法二： 子节点.parentNode.removeChild(子节点);  子节点的父辈节点
    bj.parentNode.removeChild(bj);
});

    // 读取#city内的HTML代码
    myClick("btn05",function () {
        var city=document.getElementById("city");
alert(city.innerText);
    });

    //设置#bj内的HTML代码
    myClick("btn06",function () {
        var bj=document.getElementById("bj");
bj.innerHTML="东京";
    });

    //向city添加广州，使用innerHTML也可以进行DOM的增删改
    //反观第一种方法，这种方法更好，但动作太大，所有节点重新设置
    myClick("btn07",function () {
        var city=document.getElementById("city");
        city.innerHTML+="<li>广州</li>";
    });

    //向city添加广州  折中的方法---推荐使用！！！！！
    myClick("btn08",function () {
        var city=document.getElementById("city");
        var li=document.createElement("li");
        //向li中设置文本
        li.innerHTML="广州";
        //将li添加到city中
        city.appendChild(li);
    });
</script>

JS实例—DOM的增删改的更多相关文章

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

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

  2. 第 9 章 DOM 的增删改查

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

  3. Python之实例对象的增删改查

    #实例对象的增删改查p1 = ChinesePeople('wangyue')#print (p1.__dict__) #查看实例对象的属性#print (p1.name)(p1.play_ball( ...

  4. JavaScript之DOM的增删改查

    JavaScript的组成: 1. ECMAScript-语法规范 2. Web APIs(浏览器提供的工具) (1).BOM (浏览器对象模型) (2).DOM (文档对象模型) 今天就来讲讲DOM ...

  5. 【基础篇】js对本地文件增删改查

    [基础篇] js对本地文件增删改查--增 js对本地文件增删改查--删 js对本地文件增删改查--改 js对本地文件增删改查--查

  6. 【基础篇】js对本地文件增删改查--查

    前置条件: 1. 本地有安装node,点击传送门 项目目录: 1. msg.json内容 { "data": [ { "id": 1, "name&q ...

  7. 【基础篇】js对本地文件增删改查--改

    前置条件: 1. 本地有安装node,点击传送门 项目目录: 1. msg.json内容 { "data": [ { "id": 1, "name&q ...

  8. 【基础篇】js对本地文件增删改查--删

    前置条件: 1. 本地有安装node,点击传送门 项目目录: 1. msg.json内容 { "data": [ { "id": 1, "name&q ...

  9. 【基础篇】js对本地文件增删改查--增

    前置条件: 1. 本地有安装node,点击传送门 项目目录: 1. msg.json内容 { "data": [ { "id": 1, "name&q ...

随机推荐

  1. webpack源码-loader的原理

    版本 webpack :"version": "3.12.0", webpack配置中的loaders配置是如何传递的 webpack/lib/NormalMo ...

  2. Git、Github、Gitkraken 学习笔记

    <Git.Github.Gitkraken 学习笔记> 一.写在前面 1.参考资料 本文参考 <Pro Git> 一书. 在官网有免费在线版可供阅读:https://git-s ...

  3. 利用服务器+jsDelivr+GitHub搭建咱的免费图床

    前言 有人就问了你这个标题写错了?不应该是PicGo+jsDelivr+GitHub搭建咱的免费图床吗? 2333,是一个上传程序啊,不系写错了. 程序介绍 目前程序已实现两种模式上传到GitHub或 ...

  4. scratch编程体感游戏

    体感游戏有很多种,最常见的就是摄像头和声控了,今天我们要用scratch编写一系列的体感游戏!!!是不是很激动呢? 首先我们来编摄像头类的: No.1拳头打幽灵 挥动头就能打到幽灵了哟! 具体程序如下 ...

  5. fastjson将json字符串转化为java对象

    目录 一.导入一个fastjson的jar包 二.Json字符串格式 三.根据json的格式创建Java类 四.给java类的所有属性添加setter方法 五.转换为java对象 一.导入一个fast ...

  6. UVALive - 3644 X-Plosives （并查集）

    A secret service developed a new kind of explosive that attain its volatile property only when a spe ...

  7. 题解 洛谷 P4546 【[THUWC2017]在美妙的数学王国中畅游】

    首先发现有连边和删边的操作,所以我们肯定要用\(LCT\)来进行维护. 接下来考虑如何进行\(LCT\)上的信息合并. \(f=1\),则函数为\(f(x)=sin(ax+b)\) \(f=2\),则 ...

  8. ISE和modelsim的配合

    modelsim好强呀,我在ISE中在编写时clk不小心把input写成了inout,ISE也没有给我报错:在modelsim中仿真时提示出这个错误了!

  9. Java 并发实践 — ConcurrentHashMap 与 CAS

    转载 http://www.importnew.com/26035.html 最近在做接口限流时涉及到了一个有意思问题,牵扯出了关于concurrentHashMap的一些用法,以及CAS的一些概念. ...

  10. CentOS7 firewalld docker 端口映射问题，firewall开放端口后，还是不能访问，解决方案

    # 宿主机ip: 192.168.91.19 docker run -itd --name tomcat -p 8080:8080 tomcat /usr/local/apache-tomcat-9. ...