当前位置：首页 > news >正文

JavaScript管理HTMLDOM元素（增删改查）

news 2026/2/9 12:49:14

本文主要讲解JavaScript如何通过管理HTML上的DOM元素，其中包括如何查询、创建、修改以及删除具体功能和源码讲解。

增加

首先我们准备一个HTML框架和简单CSS样式，我对其中元素作用和关系进行一个简单说明。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.container{width:200px;height:200px;border:1px solid gray;}</style></head><body><div id="a" class="container"><div id="b">1</div></div><button onclick="create()">点击创建一个元素</button><button onclick="del()">点击删除一个元素</button><button onclick="upd()">点击修改一个元素</button><button onclick="select()">点击查询a元素是否存在</button></body><script>function create(){let element=document.createElement('div')document.getElementById('a').insertAdjacentHTML('afterbegin','<span>新增成功</span>')}function del(){let element=document.getElementById('b')element.parentNode.removeChild(element)}function upd(){document.getElementById('b').innerHTML='2'}function select(){if(document.getElementById('b')){alert('b元素依然存在')}else{alert('b元素已被删除')}}</script>
</html>

在上述代码中可以看到，我们有一个div、一个span子元素和四个按钮，这四个按钮分别是增删改查功能。

新增功能主要是通过，createElement关键词实现的，这个关键词用于创建元素。创建后还可以新增一些属性值和方法、样式等，需要用到setAttribute、value等等特性进行添加。这里就不赘述了，赋值给element后，用insertadjactHTML关键词对在id为a的父节点中新增，除了这个方法外还可以用appendChild方法来进行新增，就可以实现创建DOM元素在HTML中。实现效果图：
新增前：
在这里插入图片描述
新增后：

删除

删除方法：要删除元素ID.parendNode.removeChild(要删除元素ID)
在上述代码中，我们可以看到id为a的div是id为b的div的父节点，当我们想删除id为b的DOM时，就可以通过document,getElementById(‘id值’).parentNode来调用它的父节点，父节点中有个方法是removeChild()，就是移除它的某个子DOM元素。然后就可以删除了。
删除前：

删除后:
在这里插入图片描述
可以发现1消失了，1是id为b的HTML内容。这也就说明它被清理了。

修改

这里主要做了一个简单的修改，也就是如何修改DOM元素中的内容，这里我用的是innerHTML元素，也就是修改div中的内容，这里我是把1修改成2.
修改前：
在这里插入图片描述
修改后：

查询

可以通过以下三种方式查询DOM元素，分别是
document.getElementById(‘元素ID’)：通过DOM元素ID查询
document.getElementsByClassName():通过DOM元素类名查询
document.getElementsByTagName():通过DOM元素标签名查询

用ID查询的多，因为ID查询自带的方法较多。

以上就是我们本文要讲解的全部内容。

JavaScript管理HTMLDOM元素（增删改查）

增加

删除

修改

查询

相关文章：

JavaScript管理HTMLDOM元素（增删改查）

RE2文本匹配实战

实在智能携手中国电信翼支付，全球首款Agent智能体亮相2023数字科技生态大会

安全框架springSecurity+Jwt+Vue-1(vue环境搭建、动态路由、动态标签页)

React整理总结（三）

天气这么好，都外出了。顺便了解一下漏桶算法

【FPGA】Verilog：实现 RS 触发器 | Flip-Flop | 使用 NOR 的 RS 触发器 | 使用 NAND 的 RS 触发器

【技术追踪】SAM（Segment Anything Model）代码解析与结构绘制之Mask Decoder

认识Tomcat

c语言通信之串口通信

软考-高级-系统架构设计师教程（清华第2版）【第16章嵌入式系统架构设计理论与实践（P555~613）-思维导图】

2024年山东省职业院校技能大赛中职组 “网络安全”赛项竞赛试题-B卷

【Python数据结构与算法】——(线性结构)精选好题分享,不挂科必看系列

大数据-之LibrA数据库系统告警处理（ALM-12054 证书文件失效）

Linux 之 journalctl 查看系统与 kernel 日志

【PTA题目】7-3 冰雹猜想。分数 10

springBoot 配置druid多数据源 MySQL+SQLSERVER

二叉树的创建与遍历

Mysql相关操作命令合集

前端开发学习 (一) 搭建Vue基础环境

后进先出（LIFO）详解

Chapter03-Authentication vulnerabilities

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

微信小程序 - 手机震动

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）

AI编程--插件对比分析：CodeRider、GitHub Copilot及其他

R语言速释制剂QBD解决方案之三

深度学习之模型压缩三驾马车：模型剪枝、模型量化、知识蒸馏

【java】【服务器】线程上下文丢失是指什么

无需布线的革命：电力载波技术赋能楼宇自控系统-亚川科技