<!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. git配置httpd服务-web_dav模式

    1,搭建httpd应用 2,修改httpd.conf文件 注释 DocumentRoot "/data/httpd/htdocs" 注释 <Directory "/ ...

  2. sqlserver安装出现找不到数据库引擎错误

    sqlserver安装出现找不到数据库引擎错误 问题的解决 第一次安装SQL server,发现它较于Oracle,都有安装卸载十分麻烦的特点.刚开始安装,就让我频繁遇到这个“找不到数据库引擎”的错误 ...

  3. 感知机（perceptron）原理总结

    目录 1. 感知机原理 2. 损失函数 3. 优化方法 4. 感知机的原始算法 5. 感知机的对偶算法 6. 从图形中理解感知机的原始算法 7. 感知机算法(PLA)的收敛性 8. 应用场景与缺陷 9 ...

  4. nodejs--抓取页面的数据--图

    感觉挺有意思,比php好玩 ----做个图留个 纪念

  5. Laravel 使用阿里云 oss 存储对象

    一.下载安装 composer require jacobcyl/ali-oss-storage 二.注册服务提供者 在config/app.php的providers下添加: //阿里云OSS对象存 ...

  6. 前端需要知道的 HTML5 SEO优化

    title标签,字数不能过长(不超过70个字符最优) <title>淘宝网 - 淘!我喜欢</title> 使用description以及keyword标签(不超过300个字符 ...

  7. 用xshell连接linux服务器失败 Could not connect to '112.74.73.194' (port 22): Connection failed.

    用XSHELL连接linux服务器出现以下错误 Connecting to 42.51.xxx.xxx:22... Connection established. To escape to local ...

  8. MYSQL的事物四大特性

    MYSQL的事物四大特性(ACID) 1.什么是事物? 事务(Transaction)是并发控制的基本单位.所谓的事务,它是由单独单元的一个或者多个sql语句组成,在这个单元中,每个mysql语句是相 ...

  9. PHP range() 函数

    实例 创建一个包含从 "0" 到 "5" 之间的元素的数组: <?php$number = range(0,5);print_r ($number);?& ...

  10. Skill 脚本演示 ycFloatUpLayer.il

    https://www.cnblogs.com/yeungchie/ ycFloatUpLayer.il 将选中 instance 中的指定 lpp "上浮". 回到目录