JavaScript如何添加删除元素？

最新推荐文章于 2023-10-26 07:57:05 发布
最新推荐文章于 2023-10-26 07:57:05 发布
阅读量572 收藏 3
点赞数 2
分类专栏： 前端 笔记 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50272558/article/details/108643061
版权

添加删除元素

(1)createElement创建一个元素节点
**createElement(“p”)**创建一个段落
(2)createTextNode创建一个文本节点
createTextNode(“文本内容”),创建一个值为“文本内容”的文本节点
(3)appendChild 添加子节点
(4)removeChild 删除子节点
动态添加
在这里插入图片描述动态删除
在这里插入图片描述这种方法是分别找到父节点和要删除的节点，然后执行删除操作。这种方法有一个前提需要知道父节点是谁
那么如果说不知道父节点是谁，该怎么删除呢？
在这里插入图片描述动态添加和动态删除的案例
案例：删除动态添加的奇数段落
思路1：获取div1下的所有段落，然后遍历，将序号为奇数的段落删除
在这里插入图片描述这种方法在最开始的时候是可以的，但是随着动态添加或者删除的运行，后面的结果就不对了，因为动态删除影响了原来的顺序，程序是按照序号去判断奇偶性，所以会出现误判
思路2：在动态添加的时候给序号为奇数的设置一个class属性，然后通过getElementsByClassName来获取奇数行

在这里插入图片描述

盗梦123
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现添加、查找、删除元素
10-23
主要汇总介绍了JavaScript实现添加、查找、删除元素的方法，十分的简单实用，有需要的小伙伴可以参考下。
【JavaScript】DOM节点-创建、插入、删除、替换、克隆节点
LuWeien的博客
01-04 1262
/ 把res这个节点放到body里面的最后面 appendChild。
document.createElemet创建的元素怎么删除
qq_36350876的博客
11-25 2460
document.createElemet创建的元素怎么删除
创建元素节点createElement和删除元素节点removeChild
qq_45305088的博客
11-03 1878
createElement <button>添加节点</button> <input type="text"> <ul> <li>香蕉</li> <li>苹果</li> <li>鸭梨</li> </ul> <script> var btn = document.querySelec
JS DOM基本操作之创建、插入、删除、替换节点操作
qq_45560350的博客
08-23 3503
创建dom节点（并未添加到页面中，一般配合插入方法使用） document.createElement(); 创建一个元素节点 var div = document.createElement('div'); 可以看到虽然创建了div节点，但页面中并没有显示 因为这里只是创建div节点，并没有把它添加到页面中 document.createTextNode(); 创建一个文本节点 var text = document.createTextNode('殷志源'); 没有添加到页面中 do
【web前端】JavaScript DOM元素(节点的创建appendChild()，删除removeChild()，修改replaceChild())
qq_51307413的博客
11-23 1259
创建新的 HTML 元素 (节点) - appendChild() 实例： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="div1"> <p id="demo">原始节点</p> <button id="
JavaScript实现向select下拉框中添加和删除元素的方法
10-20
主要介绍了JavaScript实现向select下拉框中添加和删除元素的方法,涉及jQuery中append()与remove()方法动态操作表单元素的相关技巧,需要的朋友可以参考下
Javascript删除指定元素节点的方法
10-22
主要介绍了使用Javascript删除指定元素节点的方法,通俗易懂,需要的朋友可以参考下。
解析javascript 数组以及json元素的添加删除
10-27
本篇文章是对javascript 数组以及json元素的添加删除进行了详细的分析介绍，需要的朋友参考下
JavaScript删除数组元素的方法
10-24
主要介绍了JavaScript删除数组元素的方法,实例分析了javascript中delete函数的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
动态的创建一个元素createElement及删除一个元素
09-04
本文用示例为大家介绍下动态创建一个元素createElement及删除一个元素，感兴趣的朋友可以参考下
js添加 删除 替换 插入节点所用的方法。js常用的几种事件。
最新发布
qingdouxiaohua的博客
10-26 182
js添加 删除 替换 插入节点所用的方法。js常用的几种事件。
原生js中的对元素的添加,删除,复制,创建等操作.
xhdjdje的博客
02-19 3297
使用原生js来对元素进行创建,删除,复制,添加等操作
用js实现添加和删除元素的功能
WaterArticle
07-21 832
用js实现添加和删除元素的功能。
createElement创建元素,removeChild删除元素
weixin_42270374的博客
07-31 1324
createElement创建元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="...
前端
qq_39586685的博客
04-24 655
HTML ##1、html的基本结构 <html> <head> <title>网页的标题</title> </head> <body> 主体内容 </body> </html> ##2、html网页的扩展名 .html或 .htm index.html或 index.htm在同一个...
JavaScript 删除数组中指定元素(5种方法)
热门推荐
欢迎光临~
05-13 12万+
以上是 JavaScript 删除数组中指定元素的多种方法。我们可以根据需求选择适合自己的方法来删除数组中的元素。希望这篇文章能够帮助你更好地掌握 JavaScript 中的数组操作。
【JavaScript-节点操作】如何进行节点的删除以及动态表格的创建，了解三种动态元素的创建区别
zhaochen1127的博客
09-13 834
JavaScript中对节点的操作依赖非常多，这一片文章带你搞懂节点删除操作和动态元素的创建 让你在节点操作中重新找到光明和方向
什么是数组的定义？
m0_50272558的博客
09-12 1万+
数组的定义形式： 数组的概念： 数组是存储同一种数据类型多个元素的集合。也可以看成是一个容器。 数组既可以存储基本数据类型，也可以存储引用数据类型。 数组的两种定义格式 格式1：数据类型[]数组名; int[] array; 格式2：数据类型 数组名[]; int arrat[]; Java中的数组必须初始化，才能使用； 所谓初始化：就是为数组中的数组元素分配内存空间，并为每个数组元素赋值（默认值）。 数组的两种初始化方式： 一种是动态初始化，初始化时只指定数组长度，由系统为数组分配初始值
javascript 数组添加元素
04-01
JavaScript数组可以使用push()方法添加元素。push()方法将一个或多个元素添加到数组的末尾。 示例代码： ``` var fruits = ["apple", "banana", "orange"]; fruits.push("kiwi"); // 添加一个元素 fruits.push(...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值