javaScript:文档流写入和元素写入
目录
前言
文档流写入
把元素直接写入到文档流
注意编辑
注意
元素写入
注意
innerHTML
特点:
设置内容
获取内容
innerText
特点:
注意
相关代码
前言
在JavaScript中,文档流写入是指将内容直接写入到DOM(文档对象模型)中的文档流中,而元素写入则是通过创建新的元素节点,并将其添加到DOM中。文档流写入和元素写入在JavaScript中发挥着至关重要的作用,可以实现动态内容更新、页面生成、用户界面交互、样式修改以及灵活定制,从而提升用户体验,增强网页应用的交互性和灵活性。
文档流写入
把元素直接写入到文档流
把元素直接写入到文档流 使用
document.write(str)
注意
1.会把内容渲染到body
2.str可以是标签,也可以是文本内容
3.后面写入的内容不会覆盖前面写入的内容
document.write('<h1>好想睡觉</h1>')document.write('<h1>超级想睡觉</h1>')document.write('阿巴阿巴')document.write('<div class="cell"></div><div class="cell"></div><div class="cell"></div>')

注意
文档流写入是一种相对简单的方式,但性能方面可能不如创建和修改DOM元素节点。如果你只是插入少量的HTML代码或需要更精确地控制元素的创建和插入位置,可以考虑使用元素写入的方式。
元素写入
元素写入是通过JavaScript中的DOM创建和修改方法来实现的,它允许我们动态地创建新的元素节点并将其添加到DOM中的特定位置。通过元素写入,我们可以更精确地控制元素的创建和插入位置。相比于文档流写入的方法,元素写入更适用于动态生成和插入元素的场景,尤其是在根据用户交互或其他条件动态生成内容时。另外,元素写入的方式也可以用于修改已存在的元素。通过获取已有的元素引用,我们可以使用DOM方法进行修改,例如修改元素的属性、样式或内容。
注意
与文档流写入一样,对于用户输入的内容,我们也应该采取适当的编码和验证措施,以防止安全风险。此外,过多的DOM操作可能会影响性能,因此在进行元素写入时,应该注意合理使用,避免无谓的操作。
innerHTML
他是dom元素的一个属性,可以通过innerHTML 设置和获取元素的内容
特点:
1.后写入的内容会覆盖之前写入的内容
2.可以写入标签,也可以写入文本
设置内容
dom.innerHTML = '内容' 如果内容是html结构,可以被渲染成html
aa.innerHTML = '为中华之崛起而读书'获取内容
dom.innerHTML 获取到了dom元素中的html结构
console.log(aa.innerHTML);
let aa = document.getElementById('aa')aa.innerHTML = '为中华之崛起而读书'aa.innerHTML += '少年中国说' //aa.innerHTML = aa.innerHTML + '少年中国说'aa.innerHTML += '<h1>兰亭集序</h1>'console.log(aa.innerHTML);

innerText
innerText 他是dom元素的一个属性,可以通过innerText 设置和获取元素的文本内容
特点:
1.后面写入的内容会覆盖前面写入的内容
2.设置的时候如若是
html结构,html结构不会被渲染,会原样写入
和innerHTML一样也可以设置和获取内容
注意
获取的结果 会 过滤掉标签名,只会显示文本内容
let bb = document.getElementById('bb')console.log(bb.innerHTML);bb.innerText = '<h1>周末吃顿好的</h1>'bb.innerText += '<h1>周末喝口西北风</h1>'console.log(bb.innerText);

相关代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文档流写入和元素写入</title><style>*{margin: 0;padding: 0;}.cell{height: 50px;background: pink;width:150px;margin: 10px;}.wp{width: 200px;height: 200px;background: pink;}</style>
</head>
<body><div class="wp" id="aa"></div><div class="wp" id="bb"><h1>中午吃啥</h1><h2>米饭</h2><h2>米粉</h2></div>
</body>
</html>
<script>/*把元素直接写入到文档流 使用document.write(str)1.会把内容渲染到body2.str可以是标签,也可以是文本内容3.后面写入的内容不会覆盖前面写入的内容*/document.write('<h1>好想睡觉</h1>')document.write('<h1>超级想睡觉</h1>')document.write('阿巴阿巴')document.write('<div class="cell"></div><div class="cell"></div><div class="cell"></div>')/*innerHTML 他是dom元素的一个属性,可以通过innerHTML 设置和获取元素的内容特点:1.后写入的内容会覆盖之前写入的内容2.可以写入标签,也可以写入文本设置内容dom.innerHTML = '内容' 如果内容是html结构,可以被渲染成html获取内容dom.innerHTML 获取到了dom元素中的html结构innerText 他是dom元素的一个属性,可以通过innerText 设置和获取元素的文本内容特点:1.后面写入的内容会覆盖前面写入的内容2.设置的时候如若是html结构,html结构不会被渲染,会原样写入和innerHTML一样也可以设置和获取内容注意 获取的结果 会 过滤掉标签名,只会显示文本内容*/ let aa = document.getElementById('aa')aa.innerHTML = '为中华之崛起而读书'aa.innerHTML += '少年中国说' //aa.innerHTML = aa.innerHTML + '少年中国说'aa.innerHTML += '<h1>兰亭集序</h1>'console.log(aa.innerHTML);let bb = document.getElementById('bb')console.log(bb.innerHTML);bb.innerText = '<h1>周末吃顿好的</h1>'bb.innerText += '<h1>周末喝口西北风</h1>'console.log(bb.innerText);
</script>
相关文章:
javaScript:文档流写入和元素写入
目录 前言 文档流写入 把元素直接写入到文档流 注意编辑 注意 元素写入 注意 innerHTML 特点: 设置内容 获取内容 innerText 特点: 注意 相关代码 前言 在JavaScript中,文档流写入是指将内容直接写入到DOM(文档对…...
【BI系统】选型常见问题解答二
本文主要总结BI系统选型过程中遇见的常见问题,并针对性做出回答,希望能为即将选型,或正在选型BI系统的企业用户们提供一个快速了解通道。 有针对金蝶云星空的BI方案吗?能起到怎样的作用? 答:奥威BI系统拥…...
docker版jxTMS使用指南:使用jxTMS采集数据之一
本文讲解了如何jxTMS的数据采集与处理框架并介绍了如何用来采集数据,整个系列的文章请查看:docker版jxTMS使用指南:4.4版升级内容 docker版本的使用,请查看:docker版jxTMS使用指南 4.0版jxTMS的说明,请查…...
【js】日期、时间正则匹配
1、日期的正则表达式 格式:2023-08-11 var reg /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/; var regExp new RegExp(reg); if(!regExp.test(value)){alert("日期格式不正确");return; }2、时间的正则表达式 格式:23:00:00…...
专利研读-SIMD系列-向量化引擎
专利研读-SIMD系列-向量化引擎 1、专利内容 阿里巴巴的专利:向量化处理数据的方法及装置,主要思想为:对于行存表或行、列存混合存储的查询场景,需要手工将行存表转换成列存表再在列存表基础上进行向量化处理,这种方式代…...
C#--设计模式之单例模式
单例模式大概是所有设计模式中最简单的一种,如果在面试时被问及熟悉哪些设计模式,你可能第一个答的就是单例模式。 单例模式的实现分为两种: 饿汉式:在静态构造函数执行时就立即实例化。懒汉式:在程序执行过程中第一…...
RWEQ风蚀方程模型与ArcGIS数据处理Python代码库添加结合理论研究和科研实践
RWEQ模型是应用比较普遍的能适应大区域定量估算风蚀量的模型。该模型是基于大量野外实验的一种经验模型,在实际测定风力导致的土壤侵蚀量以及当地的气象、地表植被、土壤湿度、地表的结皮和地表的可蚀性等因子的基础上得出的一个经验方程。 1、掌握土壤风蚀模型的原…...
基于STM32微控制器的物联网(IoT)节点设计与实现
基于STM32微控制器的物联网(IoT)节点的设计和实现。我们讨论物联网节点的基本概念和功能,并详细介绍了STM32微控制器的特点和优势。然后,我们将探讨如何使用STM32开发环境和相关的硬件模块来设计和实现一个完整的物联网节点。最后,我们将提供一个示例代码,展示如何在STM3…...
篇二十一:中介者模式:解耦对象之间的交互
篇二十一:"中介者模式:解耦对象之间的交互" 开始本篇文章之前先推荐一个好用的学习工具,AIRIght,借助于AI助手工具,学习事半功倍。欢迎访问:http://airight.fun/。 另外有2本不错的关于设计模式…...
tomcat的多实例,动静分离(web服务基础结束)
多实例 多实例就是在一台服务器上有多个tomcat的服务(核心是改端口) 实验:多实例 安装步骤 1.安装好 jdk 2.安装 tomcat cd /opt tar zxvf apache-tomcat-9.0.16.tar.gz mkdir /usr/local/tomcat mv apache-tomcat-9.0.16 /usr/local/tomca…...
LeetCode150道面试经典题--判断子序列(简单)
1.题目 给定字符串 s 和 t ,判断 s 是否为 t 的子序列。 字符串的一个子序列是原始字符串删除一些(也可以不删除)字符而不改变剩余字符相对位置形成的新字符串。(例如,"ace"是"abcde"的一个子序…...
kubeadml 安装 k8s
目录 一:kubeadml 安装 k8s 1、网络环境 2、 环境准备 3、 所有节点安装docker 4、所有节点安装kubeadm,kubelet和kubectl 5、部署K8S集群 6、测试 二: 部署 Dashboard 一:kubeadml 安装 k8s 1、网络环境 master&am…...
考研C语言进阶题库——更新16-20题
目录 16计算t11/2...1/n-11/n 17计算1997! 18计算t1-122-133-...-1nn 19相传国际象棋是古印度舍罕王的宰相达依尔发明的.舍罕王十分喜爱象棋,决定让宰相自己选择何种赏赐. 这位聪明的宰相指着8*8共64格的象棋说:陛下,请您赏给我一些麦子吧. 就在棋盘的第1格放1粒…...
【变形金刚01】attention和transformer所有信息
图1.来源:Arseny Togulev在Unsplash上的照片 一、说明 这是一篇 长文 ,几乎讨论了人们需要了解的有关注意力机制的所有信息,包括自我注意、查询、键、值、多头注意力、屏蔽多头注意力和转换器,包括有关 BERT 和 GPT 的一些细节。因…...
面试热题(路径总和II)
给你二叉树的根节点 root 和一个整数目标和 targetSum ,找出所有 从根节点到叶子节点 路径总和等于给定目标和的路径。 叶子节点 是指没有子节点的节点。 在这里给大家提供两种方法进行思考,第一种方法是递归,第二种方式使用回溯的方式进行爆…...
测试 tensorflow 1.x 的一个demo 01
tensorflow 1.0的示例代码 demo_01.py import tensorflow as tf import os os.environ[TF_CPP_MIN_LOG_LEVEL]2def tf114_demo():a 3b 4c a bprint("a b in py ",c)a_t tf.constant(3)b_t tf.constant(4)c_t a_t b_tprint("TensorFlow add a_t b_t &…...
达蒙DM数据库使用经验
DM表/字段注释 注:dm数据库无法在建表的同时为字段名添加注释 //为表添加注释 comment on table 库名.表名 is 表注释; //为表字段添加注释 comment on column 库名.表名.列名 is 列注释;DM查询错误:无效的表或视图 1,确认表一定存在 2&am…...
Redis—集群
目录标题 主从复制第一次同步命令传播分担主服务器压力增量复制总结面试题什么是Redis主从复制Redis主从复制的原理Redis主从复制的优点Redis主从复制的缺点Redis主从复制的配置步骤Redis主从复制的同步策略主从节点是长还是短连接判断某个节点是否正常工作主从复制架构中&…...
【C语言】数据在内存中的存储详解
文章目录 一、什么是数据类型二、类型的基本归类三、 整型在内存中的存储1.原码、反码、补码2.大小端(1)什么是大小端(2)为什么会有大小端 四、浮点型在内存中的存储1. 浮点数存储规则 五、练习1.2.3.4.5.6.7. 一、什么是数据类型 我们可以把数据类型想象为一个矩形盒子&#x…...
PIC单片机配置字的设置
PIC单片机配置字的设置 PIC系列单片机,其芯片内部大都设置有一个特殊的程序存储单元,地址根据不同的单片机而定,此存储单元用来由单片机用户自由配置或定义单片机内部的一些功能电路单元的性能选项,所以被称之为系统配置字。目前PIC单片机系统配置字的方法有两种,一种是利…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序
一、开发准备 环境搭建: 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 项目创建: File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...
在四层代理中还原真实客户端ngx_stream_realip_module
一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡(如 HAProxy、AWS NLB、阿里 SLB)发起上游连接时,将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后,ngx_stream_realip_module 从中提取原始信息…...
Cinnamon修改面板小工具图标
Cinnamon开始菜单-CSDN博客 设置模块都是做好的,比GNOME简单得多! 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...
跨链模式:多链互操作架构与性能扩展方案
跨链模式:多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈:模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展(H2Cross架构): 适配层…...
根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:
根据万维钢精英日课6的内容,使用AI(2025)可以参考以下方法: 四个洞见 模型已经比人聪明:以ChatGPT o3为代表的AI非常强大,能运用高级理论解释道理、引用最新学术论文,生成对顶尖科学家都有用的…...
SpringTask-03.入门案例
一.入门案例 启动类: package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...
论文阅读笔记——Muffin: Testing Deep Learning Libraries via Neural Architecture Fuzzing
Muffin 论文 现有方法 CRADLE 和 LEMON,依赖模型推理阶段输出进行差分测试,但在训练阶段是不可行的,因为训练阶段直到最后才有固定输出,中间过程是不断变化的。API 库覆盖低,因为各个 API 都是在各种具体场景下使用。…...
【无标题】湖北理元理律师事务所:债务优化中的生活保障与法律平衡之道
文/法律实务观察组 在债务重组领域,专业机构的核心价值不仅在于减轻债务数字,更在于帮助债务人在履行义务的同时维持基本生活尊严。湖北理元理律师事务所的服务实践表明,合法债务优化需同步实现三重平衡: 法律刚性(债…...
恶补电源:1.电桥
一、元器件的选择 搜索并选择电桥,再multisim中选择FWB,就有各种型号的电桥: 电桥是用来干嘛的呢? 它是一个由四个二极管搭成的“桥梁”形状的电路,用来把交流电(AC)变成直流电(DC)。…...
Spring AOP代理对象生成原理
代理对象生成的关键类是【AnnotationAwareAspectJAutoProxyCreator】,这个类继承了【BeanPostProcessor】是一个后置处理器 在bean对象生命周期中初始化时执行【org.springframework.beans.factory.config.BeanPostProcessor#postProcessAfterInitialization】方法时…...
