js 关于改变标签元素innerText和innerHTML

最新推荐文章于 2022-10-06 21:19:46 发布
最新推荐文章于 2022-10-06 21:19:46 发布
阅读量1.1k 收藏
点赞数
文章标签： html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44642057/article/details/109171851
版权

改变标签元素innerText和innerHTML

<p>
    我是p标签文字
</p>

先来试一下innerText

    const div = document.querySelector('p');
    div.innerText = '<strong>已经变了，还加粗了</strong>'

用innerText修改标签里的元素，渲染出来的是

可以看出innerText把<strong>标签也渲染出来了

得出结果innerText不能识别HTML标签，非标准，回去处空格和换行

在来试一下innerHTML

用innerHTML修改标签里的元素，渲染出来的是

div.innerHTML = '<strong>已经变了，还加粗了</strong>'

（在页面上也是加粗的）

得出结果innerHTML可以识别HTML标签 Wsc标准 可以保留空格和换行

所以innerHTML用起来比较好用，功能比innerText多，innerHTML比innerText好用；我们以后常用的也会是innerHTML

 

今晚早·睡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js更改标签内容 innerHTML innerText
猿码互联
05-20 374
属性用于获取或设置HTML元素的内容，包括标签和标签内的文本。属性用于获取或设置元素的纯文本内容，不包含任何HTML标签。标签的内容将被替换为"New Content"。属性，只能更改元素内部的文本内容，而不影响标签。标签内的文本将被替换为"New Text"，但是。执行上述JavaScript代码后，执行上述JavaScript代码后，在JavaScript中，可以使用。属性，可以替换整个元素的内容。属性在IE浏览器中不支持，而。属性来更改标签的内容。标签内的文本，可以使用。标签本身不会被替换。
innerText和innerHTML 一些问题分析
09-05
尽管DOM带来了动态修改文档的能力，但对开发人员来说，这还不够。IE4.0为所有的元素引入了两个特性，以更方便的进行文档操作，这两个特性是innerText和innerHTML。
JS DOM innerHTML和innerText
大河之犬的博客
10-06 999
属性很方便地获取和设置一个元素的“内部元素”，也可以使用。在JavaScript中，我们可以使用。属性获取和设置一个元素的“内部文本”获取的是元素内部所有的内容，而。获取的仅仅是文本内容。
innerHTML和innerText的用法（动态改变网页内容）
cyw1900的专栏
05-15 1625
最近在学习JavaScript，觉得innerHTML和innerText太有用了，利用它们，我们可以试自己的网页实现动态化。不过在使用的过程中，千万要注意它们的大小写，因为错一点您就得不到预期的效果了。这是全新的方法，当您掌握它以后将可随心所欲的设计动态内容了。
innerText和innerHTML改变元素内容
qq_44690849的博客
04-18 1727
1、innerText: 以点击按钮，div里的文字显示当前时间为例： <button>显示当前系统时间</button> <div>某个时间</div> js部分代码： // 获取元素 var btn = document.querySelector('button'); var div = document.querySelector('div') // 绑定事件 btn.onclick = function () {
html text的值改变,为什么更改innerText值也会改变innerHTML？
weixin_35993037的博客
06-17 363
我有一个asp.net代码，可以创建一个按钮，如下所示：Maximize现在在javascript文件中我在function1函数中执行以下操作：document.getElementById("button1").innerText = "Minimize";document.getElementById("button1").value = "Minimize";document.getEle...
innerHTML\innerText
from_shanghai的博客
08-13 203
document.write 和 innerHTML ： document.write 重绘 整个页面，innerHTML 重绘页面的一部分。 为什么 js中 不推荐使用 innerHTML？ 因为 innerHTML 每次修改内容 都会刷新，慢。（ 不明白 这个“慢”是指要刷新，所以 更新数据慢吗？） <!DOCTYPE html> <html lang="en"&...
DOM：使用innerText和innerHTML来改变元素的内容，以及两者的不同之处
weixin_46682277的博客
03-16 768
改变元素内容： element.innerText 会去除html标签，同时如果内容有空格和换行也会去掉（非标准） element.innerHTML 包括html标签，同时如果内容有空格和换行会保留（W3C标准） 因此实际中会更提倡用element.innerHTML。且这两个属性是可读写的，可以获取到元素里面的内容。 <div>我叫小茗</div> <script> var nav = document.querySelector("div"); var
javascript中innerText和innerHTML属性用法实例分析
12-10
总的来说，`innerText` 和 `innerHTML` 是JavaScript中处理元素内容的两个关键属性，它们各有优势，适用于不同的场景。`innerText` 更侧重于纯文本操作，而 `innerHTML` 则允许复杂的HTML结构操作。理解并恰当使用这...
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
10-16
本篇文章将深入讲解如何使用文档就绪函数以及`innerHTML`和`innerText`属性来实现动态内容的更新。 首先，我们要了解什么是文档就绪函数。在JavaScript中，通常使用`window.onload`或jQuery的`$(document).ready()`...
javascript innerHTML、outerHTML、innerText、outerText的区别
10-30
- 在设置时，innerHTML和innerText只改变元素内部的文本，outerHTML和outerText则会替换整个元素及其内容。 - innerHTML和innerText是W3C标准属性，而outerHTML和outerText主要是IE浏览器的扩展。在跨浏览器兼容性...
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
09-05
在网页开发中，DOM（Document Object Model）操作是不可或缺的一部分，`innerHTML` 和 `innerText` 是两个常用的属性，用于处理HTML元素的内容。了解它们的用法和区别对于编写兼容性的JavaScript代码至关重要。 `...
innerHTML,outerHTML,innerText,outerText的用法及区别解析
09-04
在JavaScript中，`innerHTML`, `outerHTML`, `innerText`, 和 `outerText` 是四个非常重要的属性，用于操作HTML元素的内容。下面将详细解释这些属性的用法和它们之间的区别。 1. **innerHTML** - `innerHTML` 属性...
innerText innerHTML的用法以及注意事项 [推荐]
09-05
innerText 和 innerHTML 是JavaScript中用于操作HTML元素内容的两个重要属性。它们允许开发者动态地修改网页上元素的文本或HTML结构。理解它们的区别和用法对于网页开发至关重要。 一、innerText 属性 innerText ...
调用innerHTML之后onclick失效问题的解决方法
09-04
- 使用`innerText`或`textContent`替换文本内容，而不是`innerHTML`，但这不适用于包含HTML标签的情况。 - 使用`DOM操作方法`如`appendChild`、`removeChild`等来添加或移除元素，以保持事件监听器。 - 使用事件委托...
在Javascript 中给label控件的 innerHTML 赋值，在后台获取不到 text值
热门推荐
sire168的专栏
06-29 1万+
<br /><script language="javascript" type="text/javascript"><br />    function qingkong()<br />var weight = document.getElementById("<%=lbl_Weight.ClientID%>").outerText;<br />            var higherScore = document.getElementById("<%= txt_HigherScore.Client
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、付费专栏及课程。

余额充值