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

js 创建DOM，并添加父DOM上，移除某个DOM的所有子节点

news 2026/2/10 21:19:41

在sectionIdDiv上，添加子DOM

<div ref="sectionIdDiv" class="sectionIdDiv">
</div>

创建你要添加的子DOM

## 创建DOM
let elementDom = document.createElement('div')## 设置DOM的样式
elementDom.style.height = "15px"
elementDom.style.width = "30px"
elementDom.style.marginBottom = "10px"## 将DOM插入到页面中
this.$refs.sectionIdDiv.appendChild(elementDom)

移除sectionIdDiv上的所有子DOM

使用 `innerHTML` 属性将 `this.$refs.sectionIdDiv` 的内容设置为空字符串，如下：
this.$refs.sectionIdDiv.innerHTML = ""这样就能移除 `sectionIdDiv` 的所有子节点。

相关文章：

js 创建DOM，并添加父DOM上，移除某个DOM的所有子节点

在sectionIdDiv上&#xff0c;添加子DOM <div ref"sectionIdDiv" class"sectionIdDiv"> </div>创建你要添加的子DOM ## 创建DOM let elementDom document.createElement(div)## 设置DOM的样式 elementDom.style.height "15px" e…...

编程日记 2023/9/11 18:17:50

element el-input 二次封装

说明&#xff1a;为实现输入限制&#xff0c;不可输入空格&#xff0c;长度限制。 inputView.vue <template><!-- 输入框 --><el-input:type"type":placeholder"placeholder"v-model"input"input"inputChange":maxle…...

编程日记 2023/9/11 18:16:48

[源码系列：手写spring] IOC第十三节：Bean作用域，增加prototype的支持

为了帮助大家更深入的理解bean的作用域&#xff0c;特意将BeanDefinition的双例支持留到本章节中&#xff0c;创建Bean,相关Reader读取等逻辑都有所改动。 内容介绍 在Spring中&#xff0c;Bean的作用域&#xff08;Scope&#xff09;定义了Bean的生命周期和可见性。包括单例和…...

编程日记 2023/9/11 18:15:47

【性能优化】事件委托

一、为什么要用事件委托 当 dom 有事件处理程序时&#xff0c;我们一般都会直接给它设置事件处理程序&#xff0c;设想一下&#xff0c;如果在一个父元素中有很多个 dom 需要添加事件处理呢&#xff1f;比如 ul 中处在100个 li&#xff0c;每个 li 都有相同的 click 事件&…...

编程日记 2023/9/11 18:14:45

C 风格文件输入/输出---无格式输入/输出---（std::fputc，std::putc，std::fputs）

C 标准库的 C I/O 子集实现 C 风格流输入/输出操作。 <cstdio> 头文件提供通用文件支持并提供有窄和多字节字符输入/输出能力的函数&#xff0c;而 <cwchar>头文件提供有宽字符输入/输出能力的函数。 无格式输入/输出 写字符到文件流 std::fputc, std::putc in…...

编程日记 2023/9/11 18:13:44

建议收藏！Harmony应用配置文件概述（Stage模型）

一. 应用配置文件 每个应用项目必须在项目的代码目录下加入配置文件&#xff0c;这些配置文件会向编译工具、操作系统和应用市场提供应用的基本信息。 在基于Stage模型开发的应用项目代码下&#xff0c;都存在一个app.json5及一个或多个module.json5这两种配置文件。 app.json5…...

编程日记 2023/9/11 18:12:43

金蝶云星空和四化智造MES（WEB）单据接口对接

金蝶云星空和四化智造MES&#xff08;WEB&#xff09;单据接口对接 接入系统&#xff1a;四化智造MES&#xff08;WEB&#xff09; MES建立统一平台上通过物料防错防错、流程防错、生产统计、异常处理、信息采集和全流程追溯等精益生产和精细化管理&#xff0c;帮助企业合理安排…...

编程日记 2023/9/11 18:11:42

Shell命令切换root用户、管理配置文件、检查硬件

Shell命令切换root用户、管理配置文件、检查硬件 切换root用户 两种方法 su命令详细介绍 sudo命令详细介绍 /etc/passwd文件 /etc/passwd文件里为什么有乱七八糟的用户&#xff1f; /etc/shadow文件 管理配置文件 检查硬件命令 查看CPU 查看GPU 与其他基于UNIX的系统…...

编程日记 2023/9/11 18:10:41

DataX(MySQL同步数据到Doris)

1.场景 这里演示介绍的使用 Doris 的 Datax 扩展 DorisWriter实现从Mysql数据定时抽取数据导入到Doris数仓表里 2.编译 DorisWriter 这个的扩展的编译可以不在 doris 的 docker 编译环境下进行&#xff0c;本文是在 windows 下的 WLS 下进行编译的 首先从github上拉取源码 …...

编程日记 2023/9/11 18:09:40

sql server服务无法启动怎么办？如何正常启动？

sql server软件是一款关系型数据库管理系统。具有使用方便可伸缩性好与相关软件集成程度高等优点。并且有些应用软件使用过程中是需要sql server数据库的后台支持的&#xff0c;我们在数据编程操作时经常会使用这款编程软件&#xff0c;在编程时系统有时会提示sql server服务无…...

编程日记 2023/9/11 18:08:39

SpringMVC实现文件上传和下载

目录 前言 一. SpringMVC文件上传 1. 配置多功能视图解析器 2. 前端代码中&#xff0c;将表单标记为多功能表单 3. 后端利用MultipartFile 接口&#xff0c;接收前端传递到后台的文件 4. 文件上传示例 1. 相关依赖&#xff1a; 2. 逆向生成对应的类 3. 后端代码&#xf…...

编程日记 2023/9/11 18:07:38

Your build is currently configured to use Java 20.0.2 and Gradle 8.0

jdk 版本不适配 下载jdk17 https://www.oracle.com/java/technologies/downloads/#jdk17 参考 JDK17的下载安装与配置(详细教程)_keyila798的博客-CSDN博客...

编程日记 2023/9/11 18:06:36

栈 之 如何实现一个栈

前言 栈最鲜明的特点就是后进先出&#xff0c;一碟盘子就是类似这样的结构&#xff0c;最晚放上去的&#xff0c;可以最先拿出来。本文将介绍的是如何自己实现一个栈结构。 栈的操作 栈是一种先进后出&#xff08;Last-In-First-Out, LIFO&#xff09;的数据结构&#xff0c…...

编程日记 2023/9/11 18:05:34

uni-app:自带的消息提示被遮挡的解决办法（自定义消息提示框）

效果&#xff1a; 代码&#xff1a; 1、在最外层或者根组件的模板中添加一个容器元素&#xff0c;用于显示提示消息。例如&#xff1a; <div class"toast-container" v-if"toastMessage"><div class"toast-content">{{ toastMessa…...

编程日记 2023/9/11 18:04:33

PHP设备检验系统Dreamweaver开发mysql数据库web结构php编程计算机网页代码

一、源码特点 PHP设备检验系统是一套完善的web设计系统&#xff0c;对理解php编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 下载地址 https://download.csdn.net/download/qq_41221322/88306259 php设备检验系统1 …...

编程日记 2023/9/11 18:03:32

Windows 可以使用以下快捷键打开终端（命令提示符）

Windows 可以使用以下快捷键打开终端&#xff08;命令提示符&#xff09; 使用快捷键 Win R 打开 “运行” 对话框&#xff0c;然后输入 “cmd” 并按下 Enter 键。这将打开默认的命令提示符窗口。 使用快捷键 Ctrl Shift Esc 打开任务管理器&#xff0c;然后在 “文件” …...

编程日记 2023/9/11 18:02:31

Netty编程面试题

1.Netty 是什么&#xff1f; Netty是 一个异步事件驱动的网络应用程序框架&#xff0c;用于快速开发可维护的高性能协议服务器和客户端。Netty是基于nio的&#xff0c;它封装了jdk的nio&#xff0c;让我们使用起来更加方法灵活。 2.Netty 的特点是什么&#xff1f; 高并发&a…...

编程日记 2023/9/11 18:01:30

math_review

topics mathmatics supreme and optimumNorm and Linear producttopology of R*Continuious Function supreme and optimum Def 1: 非空有界集合必有上确界 common norm (1) x ∈ \in ∈ Rn, ||x||2 x 1 2 x 2 2 . . . x n 2 \sqrt {x_1^2x_2^2...x_n^2} x12​x22​.…...

编程日记 2023/9/11 18:00:28

肖sir__设计测试用例方法之场景法04_（黑盒测试）

设计测试用例方法之场景法 1、场景法主要是针对测试场景类型的&#xff0c;顾也称场景流程分析法。 2、流程分析是将软件系统的某个流程看成路径&#xff0c;用路径分析的方法来设计测试用例。根据流程的顺序依次进行组合&#xff0c;使得流程的各个分支能走到。 举例说明&…...

编程日记 2023/9/11 17:59:28

plt函数显示图片 在图片上画边界框 边界框坐标转换

一.读取图片并显示图片 %matplotlib inline import torch from d2l import torch as d2l读取图片 image_path ../data/images/cat_dog_new.jpg # 创建画板 figure d2l.set_figsize() image d2l.plt.imread(image_path) d2l.plt.imshow(image);二.给出一个(x左上角,y左上角,…...

编程日记 2023/9/11 17:58:26

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

编程新知 2026/2/7 17:35:15

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

编程新知 2026/1/16 16:34:26

可靠性+灵活性：电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

编程新知 2025/9/27 2:43:26

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

编程新知 2026/2/9 4:13:22

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

编程新知 2025/10/7 15:08:22

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

编程新知 2026/2/6 7:30:33

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

编程新知 2025/11/30 11:30:47

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...

编程新知 2026/2/1 3:19:54

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

编程新知 2026/2/2 18:33:19

LLMs 系列实操科普（1）

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

编程新知 2026/1/31 11:35:24