<!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. 计算思维（Computational Thinking）在少儿编程中的体现

    本文主要针对少儿编程从业人员及正在学习编程的学生家长 大家好,我是C大叔,国内早期的少儿编程从业人员.一直以来都是在做scratch,JavaScript,python以及信息学奥赛C++的讲师,教研 ...

  2. eclipse GIT本地库分支操作

    git分支是一个重要的知识点,平时我们开发主要结合eclipse,idea来操作,今天这贴主要以eclipse来操作git本地库分支,主要内容包括新建分支,切换分支,合并分支,冲突解决,重命名分支,删 ...

  3. 惠普EX920强打760P驱动后无法开机，无法启动系统。

    Windows10 1909与Intel 760P驱动版本不匹配的原因,造成了强打驱动后,无法启动系统的原因. 惠普EX920强打Intel 760P驱动教程:http://tieba.baidu.c ...

  4. [leetcode/lintcode 题解] 谷歌面试题：找出有向图中的弱连通分量

    请找出有向图中弱连通分量.图中的每个节点包含 1 个标签和1 个相邻节点列表.(有向图的弱连通分量是任意两点均有有向边相连的极大子图) 将连通分量内的元素升序排列. 在线评测地址:https://ww ...

  5. Spring发布WebService并调用已有的WebService

    发布WebService 1.编写生成WebService的Java类 package com.webService; import com.service.PianoServiceImpl; imp ...

  6. idea 配置多个tomcat引发的血案

    javax.management.InstanceNotFoundException: Catalina:type=Server 修改tomcat端口时却仍是8080 没有使用在idea tomcat ...

  7. mac下高效安装 homebrew 及完美避坑姿势 （亲测有效）

    世上无难事,只要找到 Homebrew 的正确安装方式. Homebrew 是什么 Homebrew是 mac的包管理器,仅需执行相应的命令,就能下载安装需要的软件包,可以省掉自己去下载.解压.拖拽( ...

  8. PHP curl_unescape函数

    (PHP 5 >= 5.5.0) curl_unescape — 解码经过URL编码的字符串. 说明 string curl_unescape ( resource $ch , string $ ...

  9. PHP image_type_to_extension - 获取图片后缀

    image_type_to_extension — 根据指定的图像类型返回对应的后缀名.高佣联盟 www.cgewang.com 语法 string image_type_to_extension ( ...

  10. luogu P2605 [ZJOI2010]基站选址 线段树优化dp

    LINK:基站选址 md气死我了l达成1结果一直调 显然一个点只建立一个基站 然后可以从左到右进行dp. \(f_{i,j}\)表示强制在i处建立第j个基站的最小值. 暴力枚举转移 复杂度\(n\cd ...