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

HTML之JavaScript DOM操作元素（2）

article 2026/4/8 21:54:22

HTML之JavaScript DOM操作元素（2）

   4.增删元素var element = document.createElement("元素名") 创建新元素父元素.appendChild(子元素)             	  	 在父元素中追加子元素父元素.insertBefore(新元素,参照元素)    		 在特定元素之前新增元素父元素.replaceChild(新元素,被替换元素)          替换特定元素元素.remove()                                  删除当前元素

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小标题</title><script>/*步骤：1.获得document DOM树window.document(是window的属性)2.从document中获取要操作的元素1.直接获取var aaa = document.getElementById("username") // 根据元素的id值获取页面上的唯一一个元素,有同名的则返回找到的第一个var bbb = document.getElementsByTagName("input")var ccc = document.getElementsByName("aaa")var ddd = document.getElementsByClassName("a") 2.间接获取var cs = div01.children // 获取全部子元素var firstc = div01.firstElementChild// 通过父元素获取第一个子元素var lastc = div01.lastElementChild // 通过父元素获取最后一个子元素var parentE = mmm.parentElement // 通过子元素获取父元素var brotherPe = nnn.previousElementSibling // 获取前面的第一个元素var brotherNe = nnn.nextElementSibling // 获取后面的第一个元素3.对元素进行操作1.操作元素的属性   元素名.属性名 = ""2.操作元素的样式   元素.style.样式名 = ""  样式名 "-" 要进行驼峰转换3.操作元素的文本   元素名.innerText   只识别文本元素名.innerHTML   识别文本的同时可以识别HTML代码4.增删元素var element = document.createElement("元素名")// <li></li>父元素.appendChild(子元素)             在父元素中追加子元素父元素.insertBefore(新元素,参照元素)    在特定元素之前新增元素父元素.replaceChild(新元素,被替换元素)  替换特定元素元素.remove()                          删除当前元素*/// 目标1 追加元素function addCs() {// 1.创建元素var newli = document.createElement("li")// <li></li>// 2.设置元素的属性和文本newli.id = "cs" //<li id = "cs"></li>newli.innerText = "长沙"//<li id = "cs">长沙</li>// 3.将元素作为子元素放入父元素中var parentE = document.getElementById("ul01")parentE.appendChild(newli)// 在父元素中追加子元素}// 目标2 特定位置追加元素function addBefore() {// 1.创建元素var newli = document.createElement("li")// <li></li>// 2.设置元素的属性和文本newli.id = "cs" //<li id = "cs"></li>newli.innerText = "长沙"//<li id = "cs">长沙</li>// 3.将元素作为子元素放入父元素中var parentE = document.getElementById("ul01")var brotherNe = document.getElementById("sz")//parentE.insertBefore(新元素,参照元素) 在特定元素之前新增元素parentE.insertBefore(newli, brotherNe)}// 目标3 替换元素function replaceSz() {// 1.创建元素var newli = document.createElement("li")// <li></li>// 2.设置元素的属性和文本newli.id = "cs" //<li id = "cs"></li>newli.innerText = "长沙"//<li id = "cs">长沙</li>// 3.元素替换var parentE = document.getElementById("ul01")var brotherNe = document.getElementById("sz")//parentE.replaceChild(新元素,被替换元素) 替换特定元素parentE.replaceChild(newli, brotherNe)}// 目标4 移除特定元素function removeSz() {// 哪个元素调用remove 就会执行删除哪个元素var brotherNe = document.getElementById("sz")brotherNe.remove(brotherNe)}// 目标5 清空列表元素function removeAll(){// 思路1 获取父元素，然后根据父元素获取父元素的第一个子元素，循环删除父元素的第一个子元素，直到为null，就相当于链表删除var dom1 = document.getElementById("ul01")var node = dom1.firstChildwhile(node!=null){node.remove()node = dom1.firstChild}// 思路2 要清空列表，就是要清空ul里面的东西，可以用标签中间夹文本的思路，直接清空ul标签中间的东西var dom2 = document.getElementById("ul01")dom2.innerHTML = ""   // innerHTML 与 innerText均可}</script>
</head><body><ul id="ul01"><li id="bj">北京</li><li id="sh">上海</li><li id="sz">深圳</li><li id="gz">广州</li></ul><!-- 目标1 在城市列表的最后添加子标签 长沙 --><button id="btn01" onclick="addCs()"> 增加长沙</button><!-- 目标2 在城市列表深圳前增加子标签 长沙 --><button id="btn02" onclick="addBefore()"> 在深圳前增加长沙</button><!-- 目标3 替换目标元素 替换深圳为长沙 --><button id="btn03" onclick="replaceSz()"> 替换深圳为长沙</button><!-- 目标4 删除，删除深圳 --><button id="btn04" onclick="removeSz()"> 移除深圳</button><!-- 目标5 清空列表 --><button id="btn05" onclick="removeAll()"> 清空列表</button>
</body></html>

相关文章：

HTML之JavaScript DOM操作元素（2）

HTML之JavaScript DOM操作元素&#xff08;2&#xff09; 4.增删元素var element document.createElement("元素名") 创建新元素父元素.appendChild(子元素) 在父元素中追加子元素父元素.insertBefore(新元素,参照元素) 在特定元素之前新增元…...

编程日记 2026/2/21 22:49:46

前端八股——JS+ES6

前端八股&#xff1a;JSES6 说明&#xff1a;个人总结&#xff0c;用于个人复习回顾&#xff0c;将持续改正创作&#xff0c;已在语雀公开&#xff0c;欢迎评论改正。...

编程日记 2026/2/25 20:02:11

day58 第十一章：图论part08

拓扑排序精讲 关键&#xff1a; 先找到入度为0的节点&#xff0c;把这些节点加入队列/结果&#xff0c;然后依次循环再找。 #include <iostream> #include <vector> #include <queue> #include <unordered_map> using namespace std; int main() {int …...

编程日记 2026/2/24 20:59:33

【MySQL 一 数据库基础】深入解析 MySQL 的索引(3)

索引 索引操作 自动创建 当我们为一张表加主键约束(Primary key)&#xff0c;外键约束(Foreign Key)&#xff0c;唯一约束(Unique)时&#xff0c;MySQL会为对应的的列自动创建一个索引&#xff1b;如果表不指定任何约束时&#xff0c;MySQL会自动为每一列生成一个索引并用ROW_I…...

编程日记 2026/4/6 10:19:13

【C++】优先级队列宝藏岛

> &#x1f343; 本系列为初阶C的内容&#xff0c;如果感兴趣&#xff0c;欢迎订阅&#x1f6a9; > &#x1f38a;个人主页:[小编的个人主页])小编的个人主页 > &#x1f380; &#x1f389;欢迎大家点赞&#x1f44d;收藏⭐文章 > ✌️ &#x1f91e; &#x1…...

编程日记 2026/4/6 20:57:36

解决elementUi el-select 响应式不生效的问题

情况一,字段类型不匹配 考虑option的value值的字段类型是否和api返回的字段类型一致&#xff0c;如果一个为字符串一个为数字类型是无法匹配上的 <template> <div><el-select v-model"value" size"large"style"width: 240px"&…...

编程日记 2026/3/6 19:55:33

List 接口中的 sort 和 forEach 方法

List 接口中的 sort 和 forEach 方法是 Java 8 引入的两个非常实用的函数&#xff0c;分别用于 排序 和 遍历 列表中的元素。以下是它们的详细介绍和用法&#xff1a; sort 函数 功能 对列表中的元素进行排序。 默认使用自然顺序&#xff08;如数字从小到大&#xff0c;字符…...

编程日记 2026/4/6 2:18:00

MusicGPT的本地化部署与远程调用：让你的Windows电脑成为AI音乐工作站

文章目录 前言1. 本地部署2. 使用方法介绍3. 内网穿透工具下载安装4. 配置公网地址5. 配置固定公网地址 前言 在如今快节奏的生活里&#xff0c;音乐不仅能够抚慰我们的心灵&#xff0c;还能激发无限创意。想象一下&#xff0c;在忙碌的工作间隙或闲暇时光中&#xff0c;只需输…...

编程日记 2026/4/6 2:29:56

小波变换背景预测matlab和python样例

小波变换使用matlab和python 注意1d和2d的函数区别。注意默认参数问题。最终三个版本结果能够对齐。 matlab load(wave_in.mat)% res: image of 1536 x 1536 th1; dlevel7; wavenamedb6;[m,n] wavedec2(res, dlevel, wavename);vec zeros(size(m)); vec(1:n(1)*n(1)*1) m…...

编程日记 2026/3/3 14:04:25

Unity通过Vosk实现离线语音识别方法

标注&#xff1a;deepseek直接生成&#xff0c;待验证 在Unity中实现离线语音识别可以通过集成第三方语音识别库来实现。以下是一个使用 Unity 和 Vosk&#xff08;一个开源的离线语音识别库&#xff09;的简单示例。 准备工作 Vosk&#xff1a;一个开源的离线语音识别库&am…...

编程日记 2026/4/6 2:05:14

【登月计划】 DAY2 中期：产品研发与设计验证（4-6）--《设计图纸如何从电脑飞进生产线？揭秘研发系统的 “暗箱操作”》

目录 四、乐高教学&#xff1a;拆解 CAD/CAE 与 PLM 的 “共生关系” 1. CAD 系统&#xff1a;工程师的 “数字画笔” &#x1f3a8; 2. CAE 系统&#xff1a;产品的 “虚拟实验室” &#x1f52c; 3. PLM 系统&#xff1a;设计的 “大管家” 五、装逼话术&#xff1a;设计…...

编程日记 2025/11/17 17:08:32

智能优化算法：莲花算法（Lotus flower algorithm，LFA）介绍，提供MATLAB代码

一、 莲花算法 1.1 算法原理 莲花算法&#xff08;Lotus flower algorithm&#xff0c;LFA&#xff09;是一种受自然启发的优化算法&#xff0c;其灵感来源于莲花的自清洁特性和授粉过程。莲花的自清洁特性&#xff0c;即所谓的“莲花效应”&#xff0c;是由其叶片表面的微纳…...

编程日记 2026/4/7 3:07:14

Qt开源项目获取

GitHub上超实用的Qt开源项目，码住不谢！🎉 宝子们，今天来给大家安利一波GitHub上超棒的Qt开源项目，无论是学习还是开发，都能找到超多灵感和实用工具，快来看看有没有你需要的吧！1. Qt-Advanced-Docking-System完美的Dock窗口布局解决方案，让你的窗口管理变得超级灵活。…...

编程日记 2026/2/26 11:10:10

Python 高级特性-迭代

目录 迭代 练习 小结 迭代 如果给定一个list或tuple&#xff0c;我们可以通过for循环来遍历这个list或tuple&#xff0c;这种遍历我们称为迭代&#xff08;Iteration&#xff09;。 在Python中&#xff0c;迭代是通过for ... in来完成的&#xff0c;而很多语言比如C语言&a…...

编程日记 2026/3/1 0:01:57

企业数据集成：实现高效调拨出库自动化

调拨出库对接调出单-v&#xff1a;旺店通企业奇门数据集成到用友BIP 在企业信息化管理中&#xff0c;数据的高效流转和准确对接是实现业务流程自动化的关键。本文将分享一个实际案例&#xff0c;展示如何通过轻易云数据集成平台&#xff0c;将旺店通企业奇门的数据无缝集成到用…...

编程日记 2026/4/7 2:25:10

基于GraphQL的电商API性能优化实战

以下是一个基于 GraphQL 的电商 API 性能优化实战案例&#xff0c;涵盖从问题分析到具体优化措施的实施过程&#xff1a; 一、初始问题分析 在电商场景下&#xff0c;随着业务发展&#xff0c;基于 GraphQL 的 API 出现了一些性能瓶颈。例如&#xff1a; 复杂查询导致响应时间过…...

编程日记 2026/3/2 11:33:39

UniApp SelectorQuery 讲解

一、SelectorQuery简介 在UniApp中&#xff0c;SelectorQuery是一个非常强大的工具&#xff0c;它允许开发者查询节点信息。通过这个API&#xff0c;我们可以获取到页面元素的尺寸、位置、滚动条位置等信息。这在处理动态布局、动画效果或是用户交互时尤为重要。 二、基本使用…...

编程日记 2025/8/11 7:03:23

数据库管理-第295期 IT架构与爆炸半径（20250221）

数据库管理295期 2025-02-21 数据库管理-第295期 架构与爆炸半径&#xff08;20250221&#xff09;1 术语新解2 硬件&#xff1a;存储VS本地盘3 数据库3.1 多模VS专用3.2 集中式VS分布式 4 公有云VS非公有云总结 数据库管理-第295期 架构与爆炸半径&#xff08;20250221&#x…...

编程日记 2026/4/5 22:50:25

基于WOA鲸鱼优化的BiLSTM双向长短期记忆网络序列预测算法matlab仿真,对比BiLSTM和LSTM

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 (完整程序运行后无水印) 2.算法运行软件版本 matlab2022a/matlab2024b 3.部分核心程序 &#xff08;完整版代码包含详细中文注释和操作步骤视频…...

编程日记 2026/4/8 8:33:17

DeepSeek私有化专家 | 云轴科技ZStack入选IDC中国生成式AI市场概览

DeepSeek 火爆全球AI生态圈&#xff0c;并引发企业用户大量私有化部署需求。 国际数据公司IDC近日发文《DeepSeek爆火的背后&#xff0c;大模型/生成式AI市场生态潜在影响引人关注》&#xff0c;认为中国市场DeepSeekAI模型的推出在大模型/生成式AI市场上引起了轰动&#xff0c…...

编程日记 2026/4/6 3:01:20

linux下软件安装、查找、卸载

目录 常见安装方式有三种&#xff1a; 1.源码安装。 2.rpm安装方式。 3.yum/apt工具级别安装。 对于前两种安装方式&#xff0c;因为软件可能有依赖关系&#xff08;安装的软件依赖于某些库&#xff0c;而这些库又依赖于某些库&#xff0c;这些都需要手动安装&#xff09;…...

编程日记 2026/2/22 10:20:00

npm在install时提示要安装python问题处理

使用npm\yarn\pnpm下载以来的时候&#xff0c;一直提示python异常&#xff0c;有的项目安装了python之后&#xff0c;下载依赖还是异常 而且旧版本项目使用python2,新的使用Python3…很烦 解决方案1&#xff1a;cnpm 安装教程&#xff1a; npm安装cnpm&#xff0c;解决node12\…...

编程日记 2026/4/8 9:58:14

Nginx代理ElasticSearch

1、将ES的账号:密码通过Base64加密 假设账号密码如下&#xff1a; 账号&#xff1a;elastic密码&#xff1a;elastichuayunworld.com echo -n elastic:elastichuayunworld.com | base64 ZWxhc3RpYzplbGFzdGljQGh1YXl1bndvcmxkLmNvbQ2、在 Nginx 配置中传递认证信息 locatio…...

编程日记 2026/2/20 22:04:18

如何将MySQL数据库迁移至阿里云

将 MySQL 数据库迁移至阿里云可以通过几种不同的方法&#xff0c;具体选择哪种方式取决于你的数据库大小、数据复杂性以及对迁移速度的需求。阿里云提供了多种迁移工具和服务&#xff0c;本文将为你介绍几种常见的方法。 方法一&#xff1a;使用 阿里云数据库迁移服务 (DTS) 阿…...

编程日记 2026/4/8 16:54:00

CSS基础（盒子模型的组成、内容溢出、隐藏元素的方式、样式的继承、元素的默认样式、布局技巧、元素之间的空白问题、行内块元素的幽灵空白问题）

文章目录 1. 盒子模型的组成1.1 内容区1.2 默认宽度1.3 内边距1.3.1 内边距属性1.3.2 复合属性1.3.3 单位1.3.4 注意事项 1.4 边框1.4.1 边框属性1.4.2 复合属性1.4.3 单方向边框1.4.4 边框样式1.4.5 注意事项 1.5 外边距1.5.1 外边距属性1.5.2 复合属性1.5.3 注意事项 1.6 外边…...

编程日记 2026/4/6 5:10:49

【第二节】C++设计模式(创建型模式)-抽象工厂模式

目录 引言 一、抽象工厂模式概述 二、抽象工厂模式的应用 三、抽象工厂模式的适用场景 四、抽象工厂模式的优缺点 五、总结 引言 抽象工厂设计模式是一种创建型设计模式&#xff0c;旨在解决一系列相互依赖对象的创建问题。它与工厂方法模式密切相关&#xff0c;但在应用…...

编程日记 2026/4/1 11:39:48

[Linux高性能服务器编程] 多线程编程

本文初发于 “天目中云的小站”&#xff0c;同步转载于此。’ 线程与进程 线程是轻量级的进程, 想要理解线程的关键, 首先要理解线程和进程之间的区别. 一个进程在创建之初其实就可以看作是一个主线程, 其创建出的线程其实和其本质无很大差别, 其实就多了一个线程共享资源罢了…...

编程日记 2026/2/15 15:16:04

【开关电源】汽车前端电源保护电路设计

前言&#xff1a; 汽车电池端子在启动或者保养过程中被反接&#xff0c;如果对这些故障不能及时处理&#xff0c;就可能导致ECU或供电设备被损坏&#xff1b;此外在供电过程中电压也存在不稳定的情况。在EMC测试中ISO16750和ISO7637也会有负电压的情况。 肖特基二极管和 P 沟道…...

编程日记 2026/4/8 21:30:46

网络运维学习笔记 017 HCIA-Datacom综合实验01

文章目录 综合实验1实验需求总部特性 分支8分支9 配置一、 基本配置&#xff08;IP二层VLAN链路聚合&#xff09;ACC_SWSW-S1SW-S2SW-Ser1SW-CoreSW8SW9DHCPISPGW 二、 单臂路由GW 三、 vlanifSW8SW9 四、 OSPFSW8SW9GW 五、 DHCPDHCPGW 六、 NAT缺省路由GW 七、 HTTPGW 综合实…...

编程日记 2026/4/8 9:42:39

Leetcode350：两个数组的交集 II

题目描述&#xff1a; 给你两个整数数组 nums1 和 nums2 &#xff0c;请你以数组形式返回两数组的交集。返回结果中每个元素出现的次数&#xff0c;应与元素在两个数组中都出现的次数一致&#xff08;如果出现次数不一致&#xff0c;则考虑取较小值&#xff09;。可以不考虑输…...

编程日记 2026/2/11 21:14:21