DOM 创建节点、添加节点和删除节点

  • 创建元素节点 document.createElement(‘标签名’)

  • 创建文本节点document.createTextNode ( 内容 )

    • 根据传入的标签名创建出一个空的元素对象
    • 创建出来的默认不显示,要成为别人的子元素才能显示,所以要结合appendChild使用
  • 添加节点(后面) 父元素.appendChild(子元素)

  • 添加节点(前面) 父元素.insertBefore(添加的内容,添加到谁前面)

    添加节点(后面) 父元素.appendChild(子元素)<div id="box">hello world</div>
    <script>
        let box = document.getElementById('box')
        let nextBox = document.createElement('div')
        let text = document.createTextNode("NEW BOX")
        // nextBox.innerText = "NEW BOX"
        box.appendChild(nextBox)
        nextBox.appendChild(text)
    </script>
    

在这里插入图片描述

  • 删除节点 父元素.removeChild (子元素)

    <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
    </ul>
     let ul = document.querySelector('ul')
     let liList = document.querySelectorAll('li')
     ul.removeChild(liList[1])
    

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/418296.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【数据结构与算法】回溯法解题20240301

这里写目录标题 一、78. 子集1、nums [1,2,3]为例把求子集抽象为树型结构2、回溯三部曲 二、90. 子集 II1、本题搜索的过程抽象成树形结构如下&#xff1a; 三、39. 组合总和1、回溯三部曲2、剪枝优化 四、LCR 082. 组合总和 II1、思路2、树形结构如图所示&#xff1a;3、回溯…

Kaggle 竞赛入门

打比赛不用写算法源码&#xff0c;应用的时候不用自己写。学习的时候可以自己写。 Kaggle 竞赛入门 认识 Kaggle 平台Kaggle竞赛知识前提结构化数据前提图像数据文本数据 Kaggle竞赛套路一个赛题的完整流程 认识 Kaggle 平台 Kaggle 官网 主页&#xff0c;比赛&#xff08;数据…

Git分布式版本控制系统——git学习准备工作

一、Git仓库介绍 开发者可以通过Git仓库来存储和管理文件代码&#xff0c;Git仓库分为两种&#xff1a; 本地仓库&#xff1a;开发人员自己电脑上的Git仓库 远程仓库&#xff1a;远程服务器上的Git仓库 仓库之间的运转如下图&#xff1a; commit&#xff1a;提交&#xff…

【HbuilderX】 uniapp实现 android申请权限 和 退出app返回桌面

目录 android申请权限&#xff1a; 监听用户是否开启权限或关闭权限&#xff1a; 退出app返回桌面&#xff1a; android申请权限&#xff1a; 首先在 manifest.json 内添加你所需要用到权限 添加权限插件 permission.js 一次就好1/权限插件 - Gitee.comhttps://gitee.co…

安装 docker 可视化工具 portainer

portainer 官方网站 https://www.portainer.io/ 一、portainer 介绍 Portainer是一款开源的容器管理平台&#xff0c;它提供了一个直观易用的Web界面&#xff0c;帮助用户管理Docker容器集群、镜像、卷等资源。Portainer 支持多种 Docker 环境&#xff0c;包括本地Docker、Sw…

k8s 存储卷详解与动静部署详解

目录 一、Volume 卷 1.1 卷类型 emptyDir &#xff1a; hostPath&#xff1a; persistentVolumeClaim (PVC)&#xff1a; configMap 和 secret&#xff1a; 二、 emptyDir存储卷 2.1 特点 2.2 用途&#xff1a; 2.3 示例 三、 hostPath存储卷 3.1 特点 3.2 用途 …

面试经典 150 题 ---- 轮转数组

面试经典 150 题 ---- 轮转数组 轮转数组方法一&#xff1a;使用额外的数组方法二&#xff1a;数组翻转 轮转数组 方法一&#xff1a;使用额外的数组 我们可以使用额外的数组来将每个元素放至正确的位置。用 n 表示数组的长度&#xff0c;我们遍历原数组&#xff0c;将原数组…

Jenkins笔记(一)

个人学习笔记&#xff08;整理不易&#xff0c;有帮助点个赞&#xff09; 笔记目录&#xff1a;学习笔记目录_pytest和unittest、airtest_weixin_42717928的博客-CSDN博客 目录 一&#xff1a;简单了解 二&#xff1a;什么是DevOps 三&#xff1a;安装Jenkins 四&#xff1…

OSCP靶场--DVR4

OSCP靶场–DVR4 考点(1.windows&#xff1a;路径遍历获取私钥getshell 2.ssh shell中runas切换用户) 1.nmap扫描 ┌──(root㉿kali)-[~/Desktop] └─# nmap -sV -sC -p- 192.168.161.179 --min-rate 2000 Starting Nmap 7.92 ( https://nmap.org ) at 2024-02-29 07:14 EST…

nextjs13如何进行服务端渲染?

目录 一、创建一个新项目 二、动态获取后端数据进行服务端渲染出现的问题 三、nextjs13如何进行服务端渲染 nextjs13是nextjs的一个重大升级&#xff0c;一些原本在next12当中使用的API在nextjs13上使用十分不便。本文将着重介绍在nextjs13及以上版本当中进行服务端渲染的方…

一个基于增量同步数据库结构的工具 - Goose

嗨&#xff01;大家好&#xff0c;我是波罗学。本文是 Golang 三方库推荐第四篇&#xff0c;系列查看&#xff1a;Golang 三方库。 上篇文章&#xff0c;我讨论了数据库 schema 同步的两种方式&#xff1a;增量和差异。今天&#xff0c;推荐一个基于 Go 实现的增量同步数据库 …

图像处理基础——频域、时域

傅里叶分析不仅仅是一个数学工具&#xff0c;更是一种可以彻底颠覆一个人以前世界观的思维模式。 一、什么是频域 时域 时域是信号在时间轴随时间变化的总体概括&#xff1b;频域是把时域波形的表达式做傅立叶等变化得到复频域的表达式&#xff0c;所画出的波形就是频谱图&a…

Android Termux安装MySQL并实现公网远程连接本地数据库

文章目录 前言1.安装MariaDB2.安装cpolar内网穿透工具3. 创建安全隧道映射mysql4. 公网远程连接5. 固定远程连接地址 前言 Android作为移动设备&#xff0c;尽管最初并非设计为服务器&#xff0c;但是随着技术的进步我们可以将Android配置为生产力工具&#xff0c;变成一个随身…

pix2pix-zero

pix2pix-zero&#xff1a;零样本图像到图像转换 论文介绍 Zero-shot Image-to-Image Translation 关注微信公众号: DeepGoAI 项目地址&#xff1a;https://github.com/pix2pixzero/pix2pix-zero 论文地址&#xff1a;https://arxiv.org/abs/2302.03027 本文介绍了一种名为…

live555学习 - 环境准备

环境&#xff1a;Ubuntu 16.04.7 ffmpeg-6.1 1 代码下载 最新版本&#xff1a; http://www.live555.com/liveMedia/public/ 历史版本下载 https://download.videolan.org/pub/contrib/live555/ 选择版本live.2023.01.19.tar.gz ps&#xff1a;没有选择新版本是新版本在…

深入理解计算机系统笔记

1.1 嵌套的数组 当我们创建数组的数组时&#xff0c;数组分配和引用的一般原则也是成立的。 例如&#xff0c;声明 int A[5][3]; 等价于下面的声明 typedef int row3_t[3]; row3_t A[5] 要访问多维数组的元素&#xff0c;编译器会以数组起始为基地址&#xff0c; (可能需…

MQTT协议解析:揭秘固定报头、可变报头与有效载荷的奥秘

MQTT&#xff08;Message Queuing Telemetry Transport&#xff0c;消息队列遥测传输协议&#xff09;是一种轻量级的通讯协议&#xff0c;常用于远程传感器和控制设备的通讯。MQTT协议基于发布/订阅模式&#xff0c;为大量计算能力有限且工作在低带宽、不可靠网络环境中的设备…

【报名指南】2024年第九届数维杯数学建模挑战赛报名全流程图解

1.官方报名链接&#xff1a; 2024年第九届数维杯大学生数学建模挑战赛http://www.nmmcm.org.cn/match_detail/32 2.报名流程&#xff08;电脑与手机报名操作流程一致&#xff09; 参赛对象为在校专科生、本科生、研究生&#xff0c;每组参赛人数为1-3人&#xff08;指导老师不…

RDD简介与基础编程

1. 什么是RDD&#xff1f; RDD&#xff08;Resilient Distributed Dataset&#xff09;叫做弹性分布式数据集&#xff0c;是Spark中最基本的数据处理模型。在代码中&#xff0c;RDD是一个抽象类&#xff0c;他代表着一个弹性的、不可变的、可分区的、里面的元素可并行计算的集…

附加Numpy数组

参考&#xff1a;Append Numpy Array 引言 在数据科学和机器学习领域&#xff0c;处理大规模数据集是一项重要且常见的任务。为了高效地处理数据&#xff0c;numpy是一个非常强大的Python库。本文将详细介绍numpy中的一个重要操作&#xff0c;即如何附加&#xff08;append&a…