DOM-24 【innerHTML】

最新推荐文章于 2024-07-23 09:00:00 发布
最新推荐文章于 2024-07-23 09:00:00 发布
阅读量351 收藏
点赞数
分类专栏： # 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影响

JavaScript--DOM--HTML 的 innerHTML 属性
norang的博客
06-06 500
7.1.2 innerHTML 属性 现如今的浏览器几乎都支持属性innerHTML ，这个属性并不是W3C DOM标准的组成部分，但现已经包含到HTML5规范中。它始见于微软 公司的IE 4浏览器，并从那时起逐渐被其他的浏览器接受。 innerHTML 属性可以用来读、写某给定元素里的HTML内容。要了解它 如何工作，请把下面这段代码插入test.html 文档的 部分： 用DOM 的眼睛看testdiv 内的标记，是如图7-2所示的结构。 div 元素的id 是testdiv 。它包含一个元素节点（
DOM-based型XSS
weixin_44186370的博客
08-20 1602
DOM-based型XSS 这种类型的XSS并非按照“数据是否保存在服务器端”来划分，DOM Based XSS从效果上来说也是反射型XSS。单独划分出来，是因为DOM Based XSS的形成原因比较特别，发现它的安全专家专门提出了这种类型的XSS。出于历史原因，也就把它单独作为一个分类了。通过修改页面的DOM节点形成的XSS，称之为DOM Based XSS。 我们客户端的js可以对页面dom节点进行动态的操作，比如插入、修改页面的内容。比如说客户端从URL中提取数据并且在本地执行、如果用户在客户端输入
DOM元素的innerHTML属性
weixin_33912638的博客
01-08 297
所有流行的浏览器的DOM元素都支持一种叫做innerHTML的属性。 这个属性最大的好处在于：它允许我们利用一种非常简单的方式来为元素分配内容。 下面我们来举个例子 实际的应用中，经常需要动态改变div的内容，我们知道，div是可以嵌套的，那么怎么动态地嵌套呢？ 我们举个增加名字列表的简单例子。 网页代码如下： <div>    姓名:         &...
DOM的innerHTML
低至一折起的博客
12-13 459
var div = document.getElementById("TableDiv");div. innerHTML 为可写的而table的innerHTML为只读，IE浏览器会报“未知的运行时错误”。而火狐等使用的内核不同，对解析html，javascript方式不同，所以不报错误。这主要是IE在对innerHTML进行写操作的时候会检查infoDIV是否具备做为这些内容中html对象容器的要
HTML的DOM的innerHTML用法，简化动态表格，控制样式css
zhansan的博客
07-12 1446
" >删除\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。
dom-op-tester:使用 MutationObserver 测试可能导致回流的 DOM 操作
07-05
例如，批量操作 DOM 而不是逐个操作，使用 `textContent` 替换 `innerHTML` 来减少解析 HTML 的开销，或者使用 CSS 动画和 transform 属性而非改变大小和位置来避免回流。 总的来说，MutationObserver 和 `dom-op-...
JS的框架Polymer中的dom-if和is属性使用说明
10-23
this.innerHTML = '我是一个demo-test'; } }); <div is="demo-test"> ``` 在上述代码中，div元素通过is属性应用了demo-test的自定义行为。这使得div具备了Polymer组件的特性。 值得注意的是，is属性所指定的...
DOM-manip_wk6_day5_wkend_hw
02-14
2. **DOM操作**：包括添加新元素（`createElement`、`appendChild`），移除元素（`removeChild`），修改元素属性（`setAttribute`、`removeAttribute`），以及更新元素内容（`innerHTML`、`textContent`）。...
DOM之innerHTML属性
weixin_46370867的博客
11-30 200
今天学习了innerHTML属性，希望可以帮助到有需要的小伙伴 innerHTML属性 用法： 可以用来设置或返回表格行的开始标签和结束标签之间的HTML 缺点： innerHTML属性存在安全问题(innerHTML属性的值不能由用户写) 下面我们向列表中加一个li 实例如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="view
JavaScript中DOM-innerHTML详解
qq_42526440的博客
09-18 1630
innerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容； 如：这是内容 我们可以通过 document.getElementById(“ABC”).innerHTML 来获取id为aa的对象的内嵌内容； 也可以对某对象插入内容，如 document.getElementById(“ABC”).innerHTML=’这是被插入的内容’; 这样就能向id为abc的对象插入内容。 实例：...
HTML DOM innerHTML 属性
weixin_37185584的博客
01-22 737
HTML DOM innerHTML 属性 HTML DOM Tablerow 对象 定义和用法 innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。 语法 tablerowObject.innerHTML=HTML 使用document.getElementById()可以取到页面上一个有id的元素 然后访问这个元素的属性，比如value 当
JavaScript——DOM属性之innerHTML和insertBefore
最新发布
PleaSure乐事的博客
07-23 766
dom中的innerHTML和insertBefore
DOM--innerHTML属性用法
qq_43411412的博客
06-04 335
innerHTML属性的用法有两个： 1、返回表格行的开始和结束标签之间的HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
html DOM innerHTML
longyuan20102011的专栏
10-24 378
function getInnerHTML() { alert(document.getElementById("tr1").innerHTML); } Firstname Lastname Peter Griffin <input type="button" onclick="getInnerHTML()" value=
21-HTML DOM-innerHTML和控制元素样式
记录java学习日常~
05-18 1109
HTML DOM（Document Object Model，文档对象模型）是指将 HTML 文档中的每个元素都作为一个对象来对待，并以树形结构来表示这些对象之间的关系。通过 HTML DOM，可以使用 JavaScript 来操作 HTML 页面中的任何元素。HTML DOM 的根节点是 document 对象，它代表了整个文档。一个 HTML 文档中的其他所有元素都可以作为文档对象的子节点进行访问和操作。
day11：（DOM操作之innerHTML 、自定义属性 、固有属性）
lst1164515273的博客
12-13 984
DOM操作之innerHTML 、 DOM操作之自定义属性 、 DOM操作之固有属性
DOM对象中的常用属性（innerHTML属性，innerText属性，className属性，style属性）
『愚』的博客
11-16 4098
DOM对象中的常用属性innerHTML属性innerText属性className属性style属性 innerHTML属性 innerHTML属性：用于设置或获取HTML 元素中的内容。 样例代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p id="o
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、付费专栏及课程。

余额充值