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

news2024/11/18 3:41:29
  • 创建元素节点 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])
    

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【AI Agent系列】【MetaGPT多智能体学习】4. 基于MetaGPT的Team组件开发你的第一个智能体团队

本系列文章跟随《MetaGPT多智能体课程》&#xff08;https://github.com/datawhalechina/hugging-multi-agent&#xff09;&#xff0c;深入理解并实践多智能体系统的开发。 本文为该课程的第四章&#xff08;多智能体开发&#xff09;的第二篇笔记。主要是对MetaGPT中Team组件…

每日一练:LeeCode-701、二叉搜索树中的插入操作【二叉搜索树+DFS+全搜】

本文是力扣 每日一练&#xff1a;LeeCode-701、二叉搜索树中的插入操作【二叉搜索树DFS全搜】学习与理解过程&#xff0c;本文仅做学习之用&#xff0c;对本题感兴趣的小伙伴可以出门左拐LeeCode。 给定二叉搜索树&#xff08;BST&#xff09;的根节点 root 和要插入树中的值 …

机器学习图像识别如何处理标签以外的图像?

机器学习图像识别技术是一种基于人工智能的图像处理方法&#xff0c;它通过训练大量的图像数据集来让计算机学习如何识别和分类图像。在图像识别任务中&#xff0c;我们通常需要对图像进行标注和分类&#xff0c;以便让计算机能够从中学习。但是&#xff0c;有时候我们可能会遇…

减少页面加载时间:提升用户体验的关键

✨✨ 祝屏幕前的您天天开心&#xff0c;每天都有好运相伴。我们一起加油&#xff01;✨✨ &#x1f388;&#x1f388;作者主页&#xff1a; 喔的嘛呀&#x1f388;&#x1f388; 目录 引言 一、为什么页面加载时间重要&#xff1f; 二、如何减少页面加载时间&#xff1f; …

集中和离散

数据分类&#xff1a;定性(分类&#xff0c;顺序)&#xff0c;定量(数值) 分类&#xff1a;男&#xff0c;女 顺序&#xff1a;高&#xff0c;中&#xff0c;低 数值&#xff1a;可计算的数字 数据等级&#xff1a;分类<顺序<数值。高级数据可以用低级数据&#xff0c…

day09_面向对象_构造方法_封装

今日内容 零、 复习昨日 一、构造方法 二、重载 三、封装 零、 复习昨日 1 类和对象是什么关系? 类是模板(原材料)对象是具体实例(成品)类创建出对象 2 类中有什么?(类的成员) 成员属性(成员变量), 成员方法 3 创建对象的语法? 类名 对象名 new 类名(); 4 调用对象属性,方法…

音频筑基:CD还是HiRes?高清音频分类一文说透

音频筑基&#xff1a;CD还是HiRes&#xff1f;高清音频分类一文说透 前言音乐品质分类相关资料 前言 音频信号中&#xff0c;经常遇到高清音乐、无损音质、CD、HiRes等说法&#xff0c;本文主要在纯数字信号级别&#xff0c;从音源分类和编码质量两个维度&#xff0c;做一个分析…

[AutoSar]BSW_Com06 CAN报文应用层到Can总线的函数调用

目录 关键词平台说明一、背景二、PDU转换三、函数调用 关键词 嵌入式、C语言、autosar、OS、BSW 平台说明 项目ValueOSautosar OSautosar厂商vector &#xff0c;芯片厂商TI 英飞凌编程语言C&#xff0c;C编译器HighTec (GCC)autosar版本4.3.X >>>>>回到总目…

《商用密码应用安全性评估管理办法》解读

根据《中华人民共和国密码法》&#xff08;以下简称《密码法》&#xff09;、《商用密码管理条例》&#xff08;以下简称《条例》&#xff09;等法律法规&#xff0c;国家密码管理局研究制定了《商用密码应用安全性评估管理办法》&#xff08;国家密码管理局令第3号&#xff09…

Vue页面更新后刷新页面不会渲染解决

小编今天犯了个很低级的错误&#xff0c;导致VUE页面刷新样式不会更新的问题&#xff01; 解决方法&#xff1a;查看你的路由路径大小写是否正确&#xff01;小编是犯了这种错误&#xff0c;特此分享下&#xff01;

Vite 构建的 Vue3 项目如何整合 Monaco Editor 代码编辑器

目录 &#x1f981; 一. 前言&#x1f981; 二. 探索过程2.1 安装2.2 配置 Monaco Editor2.3 编写 Monaco Editor 代码编辑器2.3.1 创建 Coding Editor 组件2.3.2 父组件使用 CodingEditor 组件 2.4 效果展示 三. 总结 &#x1f981; 一. 前言 各位好&#xff01;我是&#x1…

Unity 预制体与变体

预制体作用&#xff1a; 更改预制体&#xff0c;则更改全部的以预制体复制出的模型。 生成预制体&#xff1a; 当你建立好了一个模型&#xff0c;从层级拖动到项目中即可生成预制体。 预制体复制模型&#xff1a; 将项目中的预制体拖动到层级中即可复制。或者选择物体复制粘贴。…

2024年2月总结及随笔之平平安安过大年

1. 回头看 日更坚持了425天。 读《千脑智能》开更并更新完成 读《十堂极简人工智能课》开更并更新完成 读《人工不智能&#xff1a;计算机如何误解世界》开更并持续更新中 2023年至2024年2月底累计码字898882字&#xff0c;累计日均码字2115字。 2024年2月码字84475字&am…

【机器学习:Recommendation System】推荐系统

推荐系统&#xff08;或推荐系统&#xff09;是一类机器学习&#xff0c;它使用数据来帮助预测、缩小范围并在呈指数级增长的选项中找到人们正在寻找的内容。 【机器学习&#xff1a;Recommendation System】推荐系统 什么是推荐系统&#xff1f;用例和应用电子商务与零售&…

基于springboot+vue的常规应急物资管理系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

动态规划|【路径问题】礼物的最大价值(LCR 166.珠宝的最高价值)

目录 题目 题目解析 思路 1.状态表示 2.状态转移方程 3.初始化 4.填表顺序 5.返回值 代码 题目 LCR 166. 珠宝的最高价值 &#xff08;现在leetcode上面是这个题&#xff09;这个题跟下面这个题叙述方式一样&#xff0c;就拿下面这个 题来讲解&#xff09; 题目描述&…

基于语义解析的KBQA——代码和论文详细分析

根据论文&#xff1a;Semantic Parsing on Freebase from Question-Answer Pairs&#xff0c;分析其代码和步骤&#xff0c;以加强对这一流程的深入理解&#xff0c;重点关注模型的输入、输出和具体方法。 前言 提供阅读本文的前提知识&#xff0c;引用自Semantic Parsing on…

Python利用pandas对数据进行特定排序

更多Python学习内容&#xff1a;ipengtao.com 在数据分析和处理过程中&#xff0c;排序是一项常见而重要的操作。Python中的pandas库提供了丰富的功能&#xff0c;可以方便地对数据进行各种排序操作。本文将详细介绍如何利用pandas对数据进行特定排序&#xff0c;包括基本排序、…

ODOO12设置收发邮件服务器教程

一、设置-技术 二、设置–技术–发件服务器 信息填写完整后&#xff0c;点击‘测试连接’&#xff0c;若提示成功&#xff0c;则发件服务器设置成功。 三、设置–技术–收件服务器 四、设置–参数–系统参数 修改之前的email系统参数&#xff1a; mail.catchall.alias: 收件服…

vivo 在离线混部探索与实践

作者&#xff1a;来自 vivo 互联网服务器团队 本文根据甘青、黄荣杰老师在“2023 vivo开发者大会"现场演讲内容整理而成。 伴随 vivo 互联网业务的高速发展&#xff0c;数据中心的规模不断扩大&#xff0c;成本问题日益突出。在离线混部技术可以在保证服务质量的同时&…