学习前端第四十二天(修改文档)

1、创建一个元素

docunment.createElement( tag );创建一个元素节点

let div = document.createElement(“div”);创建一个div标签

document.createTextNode( Text );创建一个文本节点

let textNode = document.createTextNode('Here I am');

2、插入方法

对于文本和元素来说使用:

  • node.append(...nodes or strings) —— 在 node 末尾 插入节点或字符串,
  • node.prepend(...nodes or strings) —— 在 node 开头 插入节点或字符串,
  • node.before(...nodes or strings) —— 在 node 前面 插入节点或字符串,
  • node.after(...nodes or strings) —— 在 node 后面 插入节点或字符串,

对于HTML代码来说:

  • "beforebegin" —— 将 html 插入到 elem 之前,
  • "afterbegin" —— 将 html 插入到 elem 开头,
  • "beforeend" —— 将 html 插入到 elem 末尾,
  • "afterend" —— 将 html 插入到 elem 之后。

3、节点移除

node.remove()

    <ul id="list"><li>1</li><li>2</li><li>3</li></ul><script>const lis = document.querySelectorAll("#list li");// 移除节点setTimeout(() => {lis[1].remove()    // 将lis的第二个元素移除}, 2000);</script>

4、克隆节点

    <ul id="list"><li>1</li><li>2</li><li>3</li></ul><script>const list = document.getElementById("list");// 克隆节点console.log(list.cloneNode())      // 浅复制,复制表面console.log(list.cloneNode(true))  // 深复制</script>

 

5、DocumentFragment

创建一个容器,用来装节点,当我们将其插入某个位置时,则会插入装进去的节点

调用:const df = new DocumentFragment();

然后可以往 df 中放节点 :df.append(......)

再把df放到其他标签元素内:???.append(df)

这样,DocumentFragment 先把节点放到容器中,再添加到页面上,页面只要渲染一次,提升性能

    <ul id="list"><li>one</li><li>two</li><li>three</li></ul><script>const list = document.getElementById("list");//  DocumentFragment 先把节点放到容器中,再添加到页面上,页面只要渲染一次,提升性能//  使用数组也可以达到同样的效果const fragment = new DocumentFragment();for (let i = 0; i <= 10; i++) {const li = document.createElement("li");li.innerText = i;fragment.append(li)}list.append(fragment); // 一次渲染页面// 数组const fragment1 = [];for (let i = 0; i <= 10; i++) {const li = document.createElement("li");li.innerText = i;fragment1.push(li)}list.append(...fragment1); // 一次渲染页面</script>

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

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

相关文章

Windows hook介绍与代码演示

Windows Hook 是一种机制&#xff0c;允许应用程序监视系统或处理特定事件。它可以拦截和更改消息&#xff0c;甚至可以插入到其他应用程序的消息处理机制中。Windows 提供了多种挂钩类型&#xff0c;例如键盘挂钩、鼠标挂钩、消息挂钩等。 hook代码实现 下面是一个使用 Wind…

【Zotero】【MacOS】Zotero6常用插件总结

因为目前MacOS只支持Zotero6&#xff0c;所以我将网上找到的教程以及自己找到适应Zotero6版本的插件做了个整合 教程地址&#xff1a;Zotero6安装/插件安装教程 插件地址&#xff1a;Zotero6_Plugs

Django教程——数据库操作(增删改查)

在上篇文章中我们学习了Django教程——模型&#xff0c;这篇文章学习Django教程——数据库操作&#xff08;增删改查&#xff09;。 在学习数据库操作之前&#xff0c;我们需要定义好模型类&#xff0c;模型类代码如下&#xff1a; from django.db import models class UserM…

OS复习笔记ch7-1

存储的基本管理需求 重定位 重定位(Relocation)&#xff1a;需要解决可执行文件中地址&#xff08;指令和数据&#xff09;和内存地址的对应。 一般有两种比较常见的重定位方式&#xff1a; 静态重定位(static relocation)&#xff1a;当程序被装入内存时&#xff0c;一次性…

Python pdf2imges -- pdf文件转图片

pdf文件转图片&#xff0c;需要安装PyMuPDF包&#xff0c;具体PyMuPDF包介绍可以参考&#xff1a;Python 处理 PDF 的神器 -- PyMuPDF import fitz # pip install PyMuPDF# PDF转换为IMG统一管理 def pdf_to_images(pdf_path, img_path, filename):"""pdf_p…

Mac系统国内通过nvm快速安装node

国内通过nvm安装node 国内nvm安装工具 地址&#xff1a;https://gitee.com/RubyMetric/nvm-cn 安装命令 bash -c "$(curl -fsSL https://gitee.com/RubyMetric/nvm-cn/raw/main/install.sh)"如果按照过程中有报错可以尝试下载安装脚本 在浏览器中打开下面的链接htt…

【头歌】计算机网络DHCP服务器配置第四关配置路由器子接口答案

头歌计算机网络DHCP服务器配置第四关配置路由器子接口操作步骤 任务描述 本关任务&#xff1a;配置路由器的子接口。 操作要求 在第一关的拓扑图的基础上&#xff0c;配置路由器及 PC 机&#xff0c;具体要求如下&#xff1a; 1、打开路由器物理接口 F0/0 &#xff1b; 2、配置…

【科普】关于Cookie的一点知识

【科普】关于Cookie的一点知识 1. Cookie的传输方式2. 不设置Domain时的默认逻辑3. SameSite设置为None的风险4. 通过IP访问时如何设置Cookie 1. Cookie的传输方式 Cookie是通过HTTP&#xff08;超文本传输协议&#xff09;和HTTPS&#xff08;安全超文本传输协议&#xff09;…

NSSCTF中的pop、babyupload、cve版本签到、奇妙的MD5、easy_html

目录 [SWPUCTF 2021 新生赛]pop [NISACTF 2022]babyupload ​编辑[GKCTF 2020]cve版签到 [SWP5UCTF 2022 新生赛]奇妙的MD5 [HNCTF 2022 Week1]easy_html 今日总结&#xff1a; [SWPUCTF 2021 新生赛]pop 1.代码审计 <?phperror_reporting(0); show_source("…

装机必备——360压缩安装教程

装机必备——360压缩安装教程 软件下载 软件名称&#xff1a;360压缩 软件语言&#xff1a;简体中文 软件大小&#xff1a;3.38M 系统要求&#xff1a;Windows7或更高&#xff0c; 32/64位操作系统 硬件要求&#xff1a;CPU2GHz &#xff0c;RAM4G或更高 下载通道①迅雷云盘丨…

Linux性能优化-网络篇

文章目录 前言一、网络性能指标二、网络基准测试如何评估系统的网络性能各协议层的性能测试转发性能TCP/UPD性能HTTP性能应用负载性能 三、网络指标的获取查询带宽网络吞吐和PPS网络连通 总结 前言 如何评价一套新环境内主机和应用的网络性能&#xff0c;有哪些指标需要注意&a…

跳跃游戏(2)

问题描述 给你一个非负整数数组 nums &#xff0c;你最初位于数组的 第一个下标 。数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个下标&#xff0c;如果可以&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 输入&#xff1…

DINO结构中的exponential moving average (ema)和stop-gradient (sg)

DINO思路介绍 在 DINO 中&#xff0c;教师和学生网络分别预测一个一维的嵌入。为了训练学生模型&#xff0c;我们需要选取一个损失函数&#xff0c;不断地让学生的输出向教师的输出靠近。softmax 结合交叉熵损失函数是一种常用的做法&#xff0c;来让学生模型的输出与教师模型的…

Flutter 中的 AnimatedDefaultTextStyle 小部件:全面指南

Flutter 中的 AnimatedDefaultTextStyle 小部件&#xff1a;全面指南 在 Flutter 中&#xff0c;AnimatedDefaultTextStyle 是一个用于动画化默认文本样式的组件&#xff0c;它可以在文本显示期间平滑地过渡文本样式&#xff0c;如字体大小、颜色和字体族。这在实现复杂的文本…

pytorch应该安装哪个nvcc -V 还是 nvidia-smi 对比的cuda?

当使用nvidia-smi时会显示 cuda driver版本&#xff0c;如下&#xff1a; NVIDIA-SMI 510.47.03 Driver Version: 510.47.03 CUDA Version: 11.6 当使用 nvcc -V 时会显示 cuda runtime version&#xff0c;如下&#xff1a; nvcc: NVIDIA (R) Cuda compiler driver …

Docker安装Oracle11g数据库

操作系统&#xff1a;centOS9使用此方法检查是否安装Docker&#xff1a;docker --help&#xff0c;如果有帮助文件则证明安装成功使用此语句检查Docker是否正在运行&#xff1a;docker images&#xff0c;实际上是查看本地镜像如果发现未运行则开启Docker&#xff1a;systemctl…

普华永道调查:“拥抱AI”的行业正呈现出生产率激增景象

全球知名四大会计师事务所之一的普华永道最新报告显示&#xff0c;一些最有可能将人工智能技术融入业务的企业&#xff0c;其生产率增长速度几乎是其他行业的5倍&#xff0c;这有望推动整体经济。周二&#xff08;5月21日&#xff09;发布的报告称&#xff0c;2018年至2022年间…

MyCat2之安装与配置文件介绍

安装 1.新建文件夹tools mkdir tools&#xff0c;并进入tools 2.下载MaCat wget http://dl.mycat.org.cn/2.0/install-template/mycat2-install-template-1.21.zip wget http://dl.mycat.org.cn/2.0/1.21-release/mycat2-1.21-release-jar-with-dependencies.jar 3.解压zip u…

怎样打造一份个性化画册呢?我来教你

在这个数字化的时代&#xff0c;传统的照片已经不能满足我们对个性化回忆的需求。个性化画册&#xff0c;不仅能够承载我们的记忆&#xff0c;还能展现自我风格。今天&#xff0c;就让我来教你如何打造一份属于自己的个性化画册。 1.要制作电子杂志,首先需要选择一款适合自己的…

kafka3.6.1版本学习

kafka目录结构 bin linux系统下可执行脚本文件 bin/windows windows系统下可执行脚本文件 config 配置文件 libs 依赖类库 licenses 许可信息 site-docs 文档 logs 服务日志 启动ZooKeeper 进入Kafka解压缩文件夹的config目录&#xff0c;修改zookeeper.properties配置文件 #t…