<!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. Python 如何生成 200 个激活码

    请用 Python 如何生成 200 个激活码. 激活码的格式为asqE-9xRK-lqWU-QkMT 要求1: 使用随机生成时,生成数字概率为1/5,大写字母和小写字母概率各为2/5 要求2: 这2 ...

  2. iconfont - 好用免费的图标库

    某里出品 打开首页???????搜索框在哪里 网站:点我

  3. socket链接

    服务端: package com.batch.service.impl; import java.io.BufferedReader; import java.io.BufferedWriter; i ...

  4. python-多任务编程05-协程(coroutine)

    协程是python个中另外一种实现多任务的方式,只不过比线程更小占用更小执行单元(理解为需要的资源). 为啥说它是一个执行单元,因为它自带CPU上下文.这样只要在合适的时机, 我们可以把一个协程 切换 ...

  5. idea2020安装教程

    2019最新版IDEA亲测可用, 2020最新版IDEA亲测可用, 重要的事说三遍: 如果自己破解不成功建议加群咨询群主:422167709   成功的也可以进群交流 激活码1 N757JE0KCT- ...

  6. O、Θ、Ω、o、ω，别再傻傻分不清了！

    前言 本篇文章收录于专辑:http://dwz.win/HjK,点击解锁更多数据结构与算法的知识. 你好,我是彤哥,一个每天爬二十六层楼还不忘读源码的硬核男人. 前面几节,我们一起学习了算法的复杂度如 ...

  7. Kafka 入门（二）--数据日志、副本机制和消费策略

    一.Kafka 数据日志 1.主题 Topic Topic 是逻辑概念. 主题类似于分类,也可以理解为一个消息的集合.每一条发送到 Kafka 的消息都会带上一个主题信息,表明属于哪个主题. Kafk ...

  8. Mysql 的数据导入导出

    一. mysqldump工具基本用法,不适用于大数据备份   1. 备份所有数据库: mysqldump -u root -p --all-databases > all_database_sq ...

  9. Apple产品价钱分析

  10. Django创建项目时应该要做的几件事

    终于可以在假期开始学习 Django 啦 !