javaScript+html——DOM增删改

最新推荐文章于 2024-02-15 18:05:10 发布
最新推荐文章于 2024-02-15 18:05:10 发布
阅读量222 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42426348/article/details/80674363
版权

利用JavaScript实现html中数据的增删改，注意第三和第四个按钮在同一页面中不能同时进行。

效果如下：


代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM增删改</title>
    <script type="text/javascript">
        window.onload = function () {

            /*创建一个城市*/
            myClick("btn01",function () {
                // alert(1);/*检查是否能够调到方法*/
                var li = document.createElement("li");
                /*实现添加的方式一：好一些*/
                li.innerHTML = "成都";
                
                /*实现添加的方式二*/
                // var liText = document.createTextNode("成都");
                // li.appendChild(liText);

                var city = document.getElementById("city");
                city.appendChild(li);/*city是父标签，在子标签里面添加*/
            })

            /*创建一个城市，并且我还要插队*/
            myClick("btn02",function () {
                // alert(2);
                var li = document.createElement("li");
                li.innerHTML = "宜宾";
                var bj = document.getElementById("bj");
                var city = document.getElementById("city");
                city.insertBefore(li,bj);/*两个节点：第一个是要插入的li，第二个是插在bj的前面*/
            })


            /*创建一个城市，并且要去替换北京*/
            myClick("btn03",function () {
                var li = document.createElement("li");
                li.innerHTML = "云南";
                var bj = document.getElementById("bj");
                var city = document.getElementById("city");
                city.replaceChild(li,bj);
            })

            /*删除id="bj"行*/
            myClick("btn04",function () {
                var bj = document.getElementById("bj");
                bj.remove();
            })
        }
        function myClick(id,fun) {/*定义功能函数*/
            var btn = document.getElementById(id);
            btn.onclick = fun;
        }
    </script>
</head>
<body>
<div id="wrap">
    <div>
        <p>城市列表</p>
        <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li>广州</li>
            <li>深圳</li>
            <!--<li>被添加的城市</li>-->
        </ul>
    </div>
    <div id="buttonLists">
        <button id="btn01">创建一个城市“成都”</button>
        <button id="btn02">创建一个城市“宜宾”，插在北京前</button>
        <button id="btn03">创建一个城市“云南”，并替换北京</button>
        <button id="btn04">删除北京</button>
    </div>
</div>
</body>
</html>

十二Tel
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【jQuery】Dom操作之增删改查
weixin_48596030的博客
10-26 370
1.创建节点 2.添加内容 3.添加节点 4.删除节点 5.修改/替换
JS中的DOM
qq_48847448的博客
08-06 5378
D——document，没有文档，也就是没有网页，DOM就无从谈起。当创建了一个网页并把它加载到web浏览器中时，DOM就悄然而生。浏览器根据网页文档创建一个文档对象。O——object，对象。对象有三种，1、用户自定义对象2、内建对象，javascript中的对象，如Array，Math，Date等。3、宿主对象，由浏览器提供的对象，如window对象。M——model，模型。正如一个火车模型代表一列真正的火车，DOM代表被加载到浏览器窗口里的当前网页。...
DOM对标签的增删改
08-09
NULL 博文链接：https://421728862.iteye.com/blog/2186616
DOM增删改
weixin_30882895的博客
09-05 113
<!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; ...
JavaScript--DOM增删改操作
weixin_30840253的博客
07-31 93
JavaScript使用DOM操作节点来进行增删改操作 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScript操作DOM节点</title> <script type="text/javascript"> ...
DOM的增删改
weixin_38779534的博客
11-25 143
-- document.createElement("div") //document.createElement:创建一个元素标签对象 -- 容器.appendChild(元素)：将元素添加到容器的末尾位置 -- div.parentNode.removeChild(div) //删除元素 -- oldEle.parentNode.insertBefore(newEle,oldEle) /...
node+vue3+mysql前后分离开发范式——实现对数据库表的增删改查
最新发布
编程知识分享，主打前端
02-15 2万+
大家好，我是yma16，本文分享关于 node+vue3+mysql前后分离开发范式——实现对数据库表的增删改查。技术选型前端：vite+vue3+antd后端：node koa数据库：mysqlkoa是一个现代的Node.js框架，可以用来构建Web应用程序。Vue.js 是一款用于构建用户界面的开源JavaScript框架。Vue.js 3 是 Vue.js的最新版本，于2020年9月正式发布。Vue.js3相对于之前的版本带来了许多重要的改进和新功能。
框架整合——SSM（SpringMVC+Spring+MyBatis）CRUD（增删改查）Demo
热心网友
08-17 9469
一、SSM框架中各层级间的作用及关系 表现层（springMVC）：Controller层（Handler层） 负责具体的业务模块流程的控制 Controller层通过要调用Service层的接口来控制业务流程，控制的 配置也在Spring配置文件里面。 业务层（Spring）：Service层 Service层：负责业务模块的逻辑应用设计。 首先设计其接口，然后再实现他的实现类。...
DOM——Document Object Model 文档对象模型
XinKun的博客
11-23 226
一、DOM简介 DOM：document object model 文档对象模型 文档：整个HTML页面 对象：网页的每一个部分 模型：表示对象之间的关系，方便我们获取对象 节点(Node): 文档节点：整个html文档 元素节点：html文档中的标签 属性节点：元素的属性 文本节点：html中文本内容 浏览器已经提供文档节点对象 对象这个对象时window属性 可以在页面中直接使用 文档节点代表的是整个网页 二
超强 DOM增删改,js日历综合案例实现
03-21
wpCalendar.js 博文链接：https://javawangli.iteye.com/blog/965775
HTML DOM(二)：节点的增删改查
web开发
07-19 244
上一篇：HTML DOM(一) 上一篇讲述了DOM的基本知识，从其得知，在DOM眼中，HTML的每个成分都可以看作是节点(文档节点、元素节点、文本节点、属性节点、注释节点，其中，属性节点是属于元素节点)，本篇的内容就是通过DOM对这些节点进行增删改查的操作。 获取(R) 1. getElementById(id)、getElementsByName(name)、getE...
DOM增删改查
KennGum的博客
07-06 293
DOM 查询 节点的属性 获取元素节点 获取元素节点的子节点 获取父节点和兄弟节点 DOM查询的其他方法 DOM增删改 Window常用对象方法 节点的属性 nodeName nodeType nodeValue 文档节点 #document 9 null 元素节点 标签名 1 null 属性节点 属性名 2 属性值 文本节点 #text 3 文本内容 获取元素节点 通过document对象调用 getElementById() 通过 id 属性获取一个元
JS学习笔记（五）DOM增删改
不想去派出所
05-20 175
0x00 好好学习吧真的，想啥520呢 0x01 DOM增删改 创建节点： 创建元素节点==>创建文本节点==>将文本节点设置成元素节点子节点==>添加到页面的节点下 1 2 3 4 将节点插入到节点中： 替换节点： 删除节点： 也可以获取父元素之后直接删除子节点： 读取节点内的HTML代码： 设置节点内的HTML代码： 在原来的基础上添加子节点： 使用innerHTML也可以完成DOM的增删改的相关操作 但
DOM 元素以及内容的增删改
iteval
07-17 194
一、DOM元素中的增加、删除、修改 1、创建元素 const div = document.createElement('div'); // 创建一个 div 元素 2、增加元素 const div = document.createElement('div'); // 创建一个 div 元素 document.getElementById('box').appendChild(div); // 创建好之后追加到 box 里面 document.getElementsByClassName('wapper
DOM标签操作-增删改
05-26 552
<script> $(function(){ // 节点操作过程：1、先声明一个变量，2、使用追加函数追加到相应的位置 var $li = $("<li>列表2</li>") // 子级结尾添加：append(),一个对象只能添加一次，加完就没有了 $("ul").append($li) $("ul").append($li) // 把子级添加到父...
5-25 js DOM的增删改
某风吾起的博客
05-25 391
文章目录二、DOM对象什么是DOM节点节点事件整个页面加载完成之后在执行dom的操作。 二、DOM对象 什么是DOM DOM ,全称Document Object Model文档对象模型，实现了以面向对象的形式来操作网页，方便简单。 JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。 文档 doucument 文档表示的就是整个的HTML网页文档 对象 o...
DOM增删改查练习
沉梦昂志
07-10 286
练习一 效果图 heml代码 <!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</
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值