1.在javaScript里删除节点

在学习中我们只学到了一种删除DOM节点的方法那就是通过元素的父元素来删除该元素,但后面我查阅资料发现删除节点还有其他方法。

1.使用 removeChild() 方法(最常用)

我们需要获得元素的父元素,如果不知道可以通过parentNode来获得

let child = document.getElementById('child-element');// 获取父节点
let parent = child.parentNode;// 删除子节点
parent.removeChild(child);

2.使用remove方法,这种方法比较新,可以直接调用,不用找父元素,这种方法较为方便。

        const li = document.querySelector('ul li:nth-child(2)')li.remove()//第二个li被删除

3.用innerHtml可以删除某元素内的所有子元素,但不删除自身,那就是直接使其的innerHtml =‘’

const ul = document.querySelector('ul ')ul.innerHTML = ''

4. 使用 replaceChildren() 方法也可以删除一个元素的所有子节点,是新出来的功能

2.在js中增加节点

在js中创建节点比较常用的只有document.createElement('标签名')这一种,但是将新创建的节点插入目标位置有几种不同的方法如下

1.appendChild() —— 在父节点末尾插入这是最常用的一种

const ul = document.querySelector('ul ')const li = document.createElement('li')li.innerHTML = '6'ul.appendChild(li)

2.insertBefore() —— 在指定子节点前插入

const ul = document.querySelector('ul ')const li = document.createElement('li')li.innerHTML = '6'ul.appendChild(li,ul.children[2])

3.append() / prepend()

append()是在父节点末尾插入

prepend()在父节点开头插入

这俩种方法是新出的,在普通浏览器也能正常使用

在发展中,插入节点和删除节点也出了新的函数可以使用我们要与时俱进

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/bicheng/89340.shtml
繁体地址,请注明出处:http://hk.pswp.cn/bicheng/89340.shtml
英文地址,请注明出处:http://en.pswp.cn/bicheng/89340.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

贪心算法题解——跳跃游戏【LeetCode】

55. 跳跃游戏 一、算法逻辑(逐步思路) 问题描述: 给定一个非负整数数组 nums,其中 nums[i] 表示从位置 i 最多可以跳跃的步数。 从起点 0 出发,判断是否能够到达最后一个位置。 解题思路: 设一个变量 mx…

复现永恒之蓝

一.打开msf找到永恒之蓝的漏洞直接运行这个漏洞二.查询这个漏洞模块需要配置的参数配置攻击主机的ip三.没有做免杀的话,记得关闭防火墙四.直接运行这里已经显示拿下目标主机五.测试给目标主机添加一个文档六.查看目标主机有没有刚才编写的文档

游戏行业中的恶梦:不断升级的DDoS攻击

近年来,游戏行业快速发展,成为全球娱乐市场的重要组成部分。然而,伴随着这一行业的繁荣,网络安全问题也随之而来。游戏公司面临着一种特殊的威胁:分布式拒绝服务(DDoS)攻击。这种攻击不仅对公司…

2025年自动化工程、物联网与计算机应用国际会议(AEITCA 2025)

2025年自动化工程、物联网与计算机应用国际会议(AEITCA 2025) 2025 International Conference on Automation Engineering, Internet of Things, and Computer Applications一、大会信息会议简称:AEITCA 2025 大会地点:中国西安 审…

Gartner《JavaScript: Top Use Cases, Frameworks and Architecture Constraints》学习心得

《JavaScript: Top Use Cases, Frameworks and Architecture Constraints》是一份面向企业技术决策者、软件架构师与高级工程师的系统性研究笔记。全文以“何时用 JavaScript、如何用好 JavaScript”为主线,从语言特性、运行时差异、适用场景、主流框架、架构约束、生态现状、…

比较vue和react框架

目录 一、基础语法 1.1、模板 vs JSX 1.2、指令 1.2.1、v-for vs Array.map 1.2.2、v-if vs 三元运算符或者&& 1.2.3、v-bind vs 直接在JSX里写{变量} 1.2.4、v-show vs style和className 1.2.5、v-html vs dangerouslySetInnerHTML 1.3、数据绑定 1.4、数据…

插板式系统的“生命线“:EtherCAT分布式供电该如何实现?

在ZIO系列插板式模组系统中,EtherCAT分布式供电如同设备的血液循环网络,其供电稳定性直接决定系统可靠性。本文将从电流计算到电源扩展,为您讲解EtherCAT分布式供电该如何实现。ZIO系列插板式模组的电源介绍ZIO系列插板式I/O模块 是ZLG开发的…

Qwen2-VL:提升视觉语言模型对任意分辨率世界的感知能力

温馨提示: 本篇文章已同步至"AI专题精讲" Qwen2-VL:提升视觉语言模型对任意分辨率世界的感知能力 摘要 我们提出了 Qwen2-VL 系列,这是对先前 Qwen-VL 模型的重大升级,重新定义了视觉处理中传统的预设分辨率方法。Qwe…

C++类模版与友元

全局函数类内实现-直接在类内声明友元即可全局函数类外实现-需要提前让编译器知道全局函数的存在#include <iostream> using namespace std;//通过全局函数来打印Person的信息template<class T1,class T2> class Person{//全局函数&#xff0c;类内实现friend void…

Linux Java环境配置

1.进入java官网&#xff0c;点击Java archive Java Downloads | Oracle 中国https://www.oracle.com/cn/java/technologies/downloads/ 2.然后下滑选择你要安装的java版本&#xff0c;这里我选择的是java8 3.依据系统架构选择版本安装&#xff0c;x86&#xff0c;x64&#xf…

flutter app内跳转到其他安卓 app的方法

flutter 内的关键代码导包&#xff1a;url_launcher: ^6.3.1跳转逻辑&#xff1a;onPressed: () async {await launchUrl(Uri.parse(demoname://));},安卓内的关键代码<intent-filter><action android:name"android.intent.action.VIEW" /><category …

医疗资质OCR智能审核:让合规管理更高效、更精准

在医疗行业&#xff0c;资质证件的审核是确保机构合规运营的关键环节。从医疗机构执业许可证到医师资格证&#xff0c;从药品经营许可证到医疗器械注册证&#xff0c;传统人工审核方式效率低下且容易出错。现在&#xff0c;医疗资质OCR智能审核解决方案正在重塑行业标准&#x…

利用 Spring 的 `@Scheduled` 注解结合简单的状态跟踪实现空闲检测方案

一种基于定时任务和简单状态跟踪的方法: 实现思路 记录用户的最后活动时间:每当用户进行某些操作(如点击、请求等),更新其最后活动的时间戳。 使用定时任务检查用户是否空闲:设置一个后台任务,定期检查每个用户的最后活动时间,判断是否超过了设定的空闲时间阈值。 执行…

如何在 Ubuntu 上安装 Microsoft Edge 浏览器?

Microsoft Edge 是 Microsoft 在2015年开发的跨平台浏览器&#xff0c;最初是建立在他们自己的浏览器引擎和 Chakra JavaScript 引擎之上的&#xff0c;此浏览器可防止恶意网站和下载文件。 本文将帮助您在 Ubuntu 系统上安装 Microsoft Edge 浏览器。 1: 下载 Edge Browser …

16路串口光纤通信FPGA项目实现指南 - 第二部分(下)

16路串口光纤通信FPGA项目实现指南 - 第二部分&#xff08;下&#xff09; 五、核心控制逻辑实现&#xff08;接收部分&#xff09; 5.4 数据接收控制逻辑 // 接收数据寄存逻辑 reg rs422_rx_valid; // 接收数据有效信号 reg [15:0] rs422_rx_data; // 接收数据寄存器…

前后端分离项目的完整部署(Jenkins自动化部署)

人工部署方式&#xff0c;参考文章&#xff1a; 前后端分离项目的完整部署&#xff08;人工部署&#xff09;-CSDN博客 目标 在Windows操作系统上&#xff0c;使用Jenkins完成源代码的自动拉取、编译、打包、发布工作。 项目背景 前端使用vue&#xff0c;程序打包后为dist目…

Python设计模式深度解析:装饰器模式(Decorator Pattern)完全指南

Python设计模式深度解析&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09;完全指南前言什么是装饰器模式&#xff1f;装饰器模式的核心思想Python函数装饰器&#xff1a;从基础到高级基础函数装饰器高级函数装饰器实现GUI装饰器模式&#xff1a;动态界面增强Tk…

JVM--虚拟线程

首先了解一个理念&#xff1a;线程与 OS 线程 1:1 绑定在传统 Java 线程&#xff08;平台线程&#xff09;模型中&#xff1a;每个 Java 线程直接对应一个操作系统级别的线程操作系统负责调度这些线程线程的创建、管理和调度都由操作系统内核处理这种模型称为 1:1 线程模型&…

掌握系统设计的精髓:12个核心设计模式的通俗解读

在构建复杂且高可用的软件系统时&#xff0c;仅仅了解编程语言和算法是不够的。真正的挑战在于如何设计出能够应对并发、故障、扩展等各种问题的健壮架构。系统设计模式正是前辈们在无数实践中提炼出的智慧结晶&#xff0c;它们是解决常见系统问题的“最佳实践”。 本文将深入浅…

概率论与数理统计(二)

事件的概率 概率&#xff1a;可能性的大小 古典概率模型&#xff1a; 1&#xff09;有限个样本点 2&#xff09;等可能性 P(A)A中包含的基本事件数基本事件总和 P(A) \frac{A中包含的基本事件数}{基本事件总和} P(A)基本事件总和A中包含的基本事件数​ 频率与概率 nnn 次实验…