DOM-24 【innerHTML】

最新推荐文章于 2024-02-28 17:14:41 发布
最新推荐文章于 2024-02-28 17:14:41 发布
阅读量327 收藏
点赞数
分类专栏： # DOM 文章标签： dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42647547/article/details/118093496
版权

一、innerHTML

（1）注意事项

在这里插入图片描述

（2）实体字符转换

在这里插入图片描述
pre标签可以把实体字符转换成标签

（3）执行过程

在这里插入图片描述

（4）安全问题

HTML5和现代的新的浏览器都会阻止这种通过innerHTML嵌入script脚本的程序执行
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在dom节点的基础上去追加html字符串，会破坏原来的dom节点的引用，但是追加了以后再重新获取节点就不会被破坏

插入纯文本的时候，就不要使用innerHTML

（5）优化方案

在这里插入图片描述
这样就只是把一个字符串放进了一个dom节点里，这个节点是在内存里面的，并没有在document文档

二、textContent

它只会将文本插入到元素内部去，性能比innerHTML要好
在这里插入图片描述
它不会被解析为dom节点，只解析为文本节点

三、innerText

给元素渲染文本节点
在这里插入图片描述
innerText：会忽略标签、style样式属性，显示文本

textContent：会忽略标签，保留style属性，显示所有非标签

innerText与textContent的区别：

textContent：

  1. textContent获取所有元素的内容（包括script、style）

innerText：

  1. 只会获取给人看的内容
  2. 会受到CSS的影响，会导致reflow

四、总结

innerHTML：性能不好，可以提取文本及html标签
innerText：性能好，只能提取文本，会剔除html标签及script、style内容，受css影响
textContent：性能好，可以提取文本及script、style内容，会剔除html标签，不受css影响

小管打天下
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
21-HTML DOM-innerHTML和控制元素样式
记录java学习日常~
05-18 1005
HTML DOM（Document Object Model，文档对象模型）是指将 HTML 文档中的每个元素都作为一个对象来对待，并以树形结构来表示这些对象之间的关系。通过 HTML DOM，可以使用 JavaScript 来操作 HTML 页面中的任何元素。HTML DOM 的根节点是 document 对象，它代表了整个文档。一个 HTML 文档中的其他所有元素都可以作为文档对象的子节点进行访问和操作。
JavaScript中DOM-innerHTML详解
qq_42526440的博客
09-18 1548
innerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容； 如：这是内容 我们可以通过 document.getElementById(“ABC”).innerHTML 来获取id为aa的对象的内嵌内容； 也可以对某对象插入内容，如 document.getElementById(“ABC”).innerHTML=’这是被插入的内容’; 这样就能向id为abc的对象插入内容。 实例：...
day11：（DOM操作之innerHTML 、自定义属性 、固有属性）
lst1164515273的博客
12-13 962
DOM操作之innerHTML 、 DOM操作之自定义属性 、 DOM操作之固有属性
HTML的DOM的innerHTML用法，简化动态表格，控制样式css
zhansan的博客
07-12 1367
" >删除\n"var text_a = document.createTextNode("删除");3. 创建td，设置td的文本为文本框的内容。5. 将td添加到tr中。//3.创建td，赋值td的标签体。//gender 的 td。//2.获取文本框的内容。//5.添加td到tr中。//name 的 td。//6.获取table。
HTML DOM基础知识及value、innerHTML、innerText属性的区别
cnds123的专栏
06-19 1294
本文首先介绍HTML DOM基础知识，再介绍JS中value、innerHTML、innerText属性的区别
Dom-Array-Methods
02-13
在这个“Dom-Array-Methods”主题中，我们将深入探讨如何将DOM操作与数组方法结合，以实现高效、简洁的前端开发。 1. **数组方法** - `map()`: 这个方法创建一个新数组，其结果是调用数组中的每个元素上的提供的...
dom-manipulation-101
08-03
9. **模板字符串和innerHTML**：如何使用模板字符串（ES6新特性）与innerHTML结合，动态生成和更新DOM内容。 10. **实际应用**：通过实例演示如何使用DOM操作实现常见的网页交互功能，如表单验证、动态加载数据、...
通过 Dom 方法提高 innerHTML 性能
09-06
总的来说，`replaceHtml()` 方法通过避免直接修改 `innerHTML` 而引起的整个 DOM 树的重新解析和渲染，从而在许多情况下显著提高了性能，尤其是在 Firefox 和 Safari 上。然而，对于 IE，仍需要权衡使用哪种方法，...
038HTML-DOM对象.doc
11-30
HTML-DOM 对象 HTML-DOM 对象是指在 HTML 文档中表示的对象，这些对象都是 Document 对象的一部分。它们可以用来表示 HTML 文档中的各个部分，如表格、行、单元格等。下面是 HTML-DOM 对象的详细介绍： 1. ...
Dom-Scripting
05-03
**JavaScript DOM操作基础** 在Web开发中，DOM（Document Object Model）是HTML和XML文档的结构化表示，它提供了一种标准的方式来访问和修改页面内容。JavaScript与DOM结合，允许我们通过编程方式操纵网页元素，...
DOM对象中的常用属性（innerHTML属性，innerText属性，className属性，style属性）
『愚』的博客
11-16 4058
DOM对象中的常用属性innerHTML属性innerText属性className属性style属性 innerHTML属性 innerHTML属性：用于设置或获取HTML 元素中的内容。 样例代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p id="o
DOM操作元素文本内容：innerHTML、innerText、value
YY的博客
10-19 1739
DOM操作元素文本内容：innerHTML、innerText、value
JS DOM innerHTML和innerText
大河之犬的博客
10-06 1006
属性很方便地获取和设置一个元素的“内部元素”，也可以使用。在JavaScript中，我们可以使用。属性获取和设置一个元素的“内部文本”获取的是元素内部所有的内容，而。获取的仅仅是文本内容。
DOM innerHTML 和 innerText 使用与区别
最新发布
汪汪汪汪
02-28 294
​ innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML;其实两者之间的区别 innerHTML是从对象的起始位置到终止位置的全部内容,包括Html标签；​ 而 innerText从起始位置到终止位置的内容, 但它去除Html标签。innerHTML取到内部所有内容（包括标签）相同点：都会替换原本（完整）的内容，重新赋值。如果不涉及到标签，两个都一样，都是完整替换。innerText只会取到文本内容。
JavaScript--DOM--HTML 的 innerHTML 属性
norang的博客
06-06 471
7.1.2 innerHTML 属性 现如今的浏览器几乎都支持属性innerHTML ，这个属性并不是W3C DOM标准的组成部分，但现已经包含到HTML5规范中。它始见于微软 公司的IE 4浏览器，并从那时起逐渐被其他的浏览器接受。 innerHTML 属性可以用来读、写某给定元素里的HTML内容。要了解它 如何工作，请把下面这段代码插入test.html 文档的 部分： 用DOM 的眼睛看testdiv 内的标记，是如图7-2所示的结构。 div 元素的id 是testdiv 。它包含一个元素节点（
让javascript中用innerHMTL添加的脚本运行起来
weixin_33940102的博客
02-21 62
把加载回来的数据以innerHTML的方式放入到一个动态生成的Div中； 创建一个文档片段，把Div中的子元素都AppendChild到片段中； 选出文档片段中的Script节点； 把文档片段中的非Script节点添加到页面； 如果此节点存在src属性，那就再一次请求此src，并取回内容；如果此节点不存在src属性，那就把此节点的文本内容取回； 取出DOM中的Head节点，再创建一...
如何用模板字符串拼接一个对象作为函数的参数_干货 | 前端模板引擎知多少
weixin_39755873的博客
12-05 1148
前端框架日新月异，而其中的数据绑定已经作为一个框架最基础的功能。我们常常使用的单向绑定、双向绑定、事件绑定、样式绑定等，里面具体怎么实现，而当我们数据变动的时候又会触发怎样的底部流程呢？模板数据绑定数据绑定的过程其实不复杂：1. 解析语法生成AST。2. 根据AST结果生成DOM。3. 将数据绑定更新至模板。1.解析语法生成AST抽象语法树（Abstract Syntax Tree）也称为AST语...
DOM的innerHTML
weixin_34006468的博客
12-13 126
var div = document.getElementById("TableDiv"); 复制代码div. innerHTML 为可写的 而table的innerHTML为只读，IE浏览器会报“未知的运行时错误”。 而火狐等使用的内核不同，对解析html，javascript方式不同，所以不报错误。 这主要是IE在对innerHTML进行写操作的时候会检查infoDIV是否具备做为这些内容中h...
解决innerHTML方法自动把字符串中符号之间的内容解析成标签的问题
m0_46641521的博客
07-26 1118
文章目录解决innerHTML方法自动把字符串中符号<>之间的内容解析成标签的问题问题描述解决办法 解决innerHTML方法自动把字符串中符号<>之间的内容解析成标签的问题 问题描述 当使用innerHTML()方法向页面中输出字符串时，该方法会自动将字符串中 < 与 > 两个符号之间的内容当成标签来处理，而不会将字符串输出到页面中。 如：下面的网页文件，当想要使用innerHTML()方法使下面网页文件中的div标签中显示如下字符串 str = "<p>我
vue 获取dom元素赋值innerHTML
05-12
在 Vue 中获取 DOM 元素可以使用 `ref`，然后通过 `$refs` 属性访问。赋值 `innerHTML` 可以通过 JavaScript 的 `innerHTML` 属性来实现。 示例代码如下： ```html <div ref="myDiv"></div> ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值