JavaScript系列-17 innerText和innerHTML属性的区别

最新推荐文章于 2024-03-10 14:01:32 发布
最新推荐文章于 2024-03-10 14:01:32 发布
阅读量279 收藏
点赞数
分类专栏： js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46222379/article/details/112125333
版权

javaScript系列

文章目录

一、innerText和innerHTML属性的区别

1.1 相同点和不同点

相同点：
	都是设置元素内部的内容。
			
不同点：
	innerHTML   会把后面的“字符串”当做一段HTML代码解释并执行。
	innerText   即使后面是一段HTML代码，也只是将其当做普通的字符串来看待。

1.2 举例

	<body>

		<script type="text/javascript">
			window.onload = function() {
				var btn = document.getElementById("button");
				btn.onclick = function() {
					// 设置div的内容
					// 第一步:获取div对象
					var divElt = document.getElementById("div");
					// 第二步:使用innerHTML属性来设置元素内部的内容

					// divElt.innerHTML = "<font color='red'>用户名不能为空！</font>";
					divElt.innerText = "<font color='red'>用户名不能为空！</font>";
				}
			}
		</script>

		<input type="button" value="设置div中的内容" id="button" />

		<div id="div"></div>

	</body>
_`sank
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript中innerText和innerHTML属性用法实例分析
10-24
主要介绍了javascript中innerText和innerHTML属性用法,实例分析了javascript中innerText和innerHTML属性的作用和相关的使用技巧,需要的朋友可以参考下
元素innerText 和innerHTML 属性的应用与区别
往前爬的蜗牛
04-01 1028
元素innerText 属性 将文本内容添加/更新到任意标签位置 , 文本中包含的标签不会被解析 为元素设置标签之间的文本内容 特点：innerText不能对内容中的html标签结构进行解析，而是会原样输出 let info = document.querySelector('#info') info.innerText = 'abc' info.innerText = '<h3>只识别内容，不能解析html标签,标签会当成字符串</h3>' 注意点： 1. 单标签不
innerHTML 与 innerText的作用与区别
最新发布
zzylj的博客
03-10 287
innerHTML 与 innerText的作用与区别
Js—innerHTML和innerText的区别
weixin_30852367的博客
04-02 453
1.innerHTML属性和innerText属性 　　都是对元素的一个操作，简单讲，innerHTML可以在某种特定环境下重构某个元素节点的DOM结构，innerText只能修改文本值 　　在JavaScript高级程序设计(第三版)是这样描述的： 　　　　在只读模式下，innerHTML返回与调用元素的所有子节点(包括元素、注释和文本节点）对应的HTML标记。 　　　　 ...
innerTex与innerHTML区别
weixin_42607969的博客
02-14 758
innerText 和 innerHTML 都是用来获取或设置 HTML 元素内部的内容，但它们有一些重要的区别： 获取内容：innerText 获取的是元素中显示的文本，它会忽略 HTML 标签。而 innerHTML 获取的是完整的 HTML 代码，包括标签。 渲染：innerText 是按照文本渲染的，它不会解析 HTML 代码。而 innerHTML 是按照 HTML 代码渲染的，它会...
js中innerHTML与innerText的用法与区别
u011927449的博客
07-14 206
用法：<divid="test"> <spanstyle="color:red">test1</span>test2 </div>在JS中可以使用：test.innerHTML: 　　也就是从对象的起始位置到终止位置的全部内容,包括Html标签。 　　上例中的test.innerHTML的值也就是“<spanstyle="color:red">test1</span>test2 ”。test.innerText: 　...
innerHTML与innerText的区别
idiot_MAN的博客
08-11 4601
innerHtml和innerText的区别
innerText和innerHTML之间的区别是什么？
m0_66314752的博客
01-11 1022
innerText和innerHTML之间的区别是什么？
HTML DOM中innerHTML、textContent和innerText属性的用法与区别
青春木鱼的博客
05-21 6806
想要获取、设置标签的内容，innerHTML以及innerText、textContent都可以使用，如果在标签中设置新的html标签内容，innerText、textContent会忽略新的html标签，仅获取纯文本内容，但innerText、textContent属性会解析标签里特殊符号，把特殊符号翻译为正文。innerHTML可以获取所有的html标签内的内容，包括新的html标签，每一个字符都会原样输出，所写即所得，且新的html标签，不会被解析，也就是没有标签效果，但输出到浏览器页面会被浏览器正常
InnerHtml、html 、InnerText —— 区别 与 联系
qq_53895518的博客
09-01 959
innerHTMLhtml()和innerText是用于获取或设置元素内容的不同方法，它们在使用和效果上有一些区别。
innerHTML和innerText的使用和区别
weixin_51109349的博客
05-07 912
document对象中有innerHTML、innerText这两个属性，都是获取document对象文本内容，但使用起来还是有区别的； 1） innerHTML设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容，包括HTML标签，但不包括自身) 2） outerHTML设置或获取标签自身及其所包含的HTML+文本信息（包括自身） 3） innerText设置或获取标签所包含的文本信息（从标签起始位置到终止位置的内容，去除HTML标签，但不包括自身） 4） outerText设置或获
javascript innerText和innerHtml应用
10-29
innerText和innerHtml看字面也应该理解的了
JavaScript中innerHTML，innerText，outerHTML的用法及区别
10-23
在javascript中如果我们要获取对象内容，js为我们提供了三种方法outerhtml、innerhtml和innertext,但他们之间具体怎么使用与具体的区别在哪里，可能很多人不知道吧，接下来跟着小编一起来学习innerHTML，innerText，...
innerText和innerHTML的区别
m0_51490605的博客
02-09 1213
innerText是输出其中的所有文字并且不会识别html标签。并且会自动取消所有的换行和空格。 而innerHtml可以识别所有的html标签，并且不会取消换行和空格。
innerText和innerHTML区别 target和this的区别
bsf000000___的博客
07-27 154
innerText和innerHTML是 JavaScript 中常用的属性，用于获取或设置 HTML 元素的文本内容。innerTextinnerTextinnerHTMLinnerHTMLinnerHTMLinnerHTML例如，考虑以下 HTML 代码：</</</总结来说，innerText返回纯文本内容，而innerHTML返回元素的 HTML 内容。在设置元素内容时，应根据具体需求来选择使用哪个属性，并注意安全性问题。如果仅需要获取或设置文本内容，推荐使用innerText。
innerText和innerHTML改变元素内容
qq_44690849的博客
04-18 1654
1、innerText: 以点击按钮，div里的文字显示当前时间为例： <button>显示当前系统时间</button> <div>某个时间</div> js部分代码： // 获取元素 var btn = document.querySelector('button'); var div = document.querySelector('div') // 绑定事件 btn.onclick = function () {
innerHTML与innerText区别
热门推荐
蜗牛学习笔记
03-08 8万+
innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。 innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。 同时，innerHTML 是所有浏览器都支持的，innerText 是IE浏览器和chrome 浏览器支持的，Firefox浏览器不支持。其实，innerHTML 是W3C 组织规定的属性；而innerText 属性是IE浏览器自己的属性，不过后来的浏览器部分实现这个属性罢了。
js中innertext和innerhtml
03-16
`innerText` 和 `innerHTML` 是 JavaScript 中的两个属性，用于访问和设置 HTML 元素中的文本内容。 - `innerText` 表示该元素的文本内容，不包括 HTML 标签。 - `innerHTML` 表示该元素的文本内容，包括 HTML 标签。 例如： ```html <div id="example"> <p>Hello, <b>world</b>!</p> </div> ``` ```js let example = document.getElementById("example"); console.log(example.innerText); // "Hello, world!" console.log(example.innerHTML); // "<p>Hello, <b>world</b>!</p>" ``` 使用 `innerHTML` 方法可以改变标签内容, 例如: ```js example.innerHTML = "Hello, <i>javascript</i>!"; ``` 输出后将会变为 : ```html <div id="example"> Hello, <i>javascript</i>! </div> ``` 注意：使用 innerHTML 可能会导致 XSS 攻击，请谨慎使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值