js中innerHTML与innerText的用法与区别

最新推荐文章于 2022-08-31 13:55:05 发布
最新推荐文章于 2022-08-31 13:55:05 发布
阅读量6w 收藏 22
点赞数 10
分类专栏： JavaScript 文章标签： javascript html 正则表达式 button 浏览器 百度

转载自：http://www.phpweblog.net/kiyone/archive/2007/05/17/1206.aspx

js中innerHTML与innerText的用法与区别

用法：

<div id="test">
   <span style="color:red">test1</span> test2
</div>

在JS中可以使用：

test.innerHTML:

　　也就是从对象的起始位置到终止位置的全部内容,包括Html标签。

　　上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2 ”。

test.innerText: 

　　从起始位置到终止位置的内容, 但它去除Html标签 

　　上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。

test.outerHTML:

　　除了包含innerHTML的全部内容外, 还包含对象标签本身。

　　上例中的text.outerHTML的值也就是<div id="test"><span style="color:red">test1</span> test2</div>


完整示例：

<div id="test">
   <span style="color:red">test1</span> test2
</div>

<a href="javascript:alert(test.innerHTML)">innerHTML内容</a>
<a href="javascript:alert(test.innerText)">inerHTML内容</a>
<a href="javascript:alert(test.outerHTML)">outerHTML内容</a>

特别说明：

　　innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：

<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>

_________________________________________________________________________________________________________

<html>
<head></head>
<frameset frameborder="yes" frameborder="1" rows="40%,*">
<frame name="top" src="1.html">
<frame name="bottom" src="2.html">
</frameset>
</html>

<html>
<head>
<script language="javascript">
function init()
{    
    var aaa = parent.window.frames[0].document.body.innerHTML; 
    alert(aaa);
}
</script>
</head>
<body>
<p align="center">nothing</p>
<p align="center"><input type="button" οnclick="init()"; value="click"></p>
</body>
</html>

<html>
<center>百度 谷歌 必应</center>
</html>


YTTCJJ
关注
  • 10
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
innerHTML和innerTest的区别
花花的果子的博客
09-01 1163
innerHTML和innerTest的区别 innerHTML如果后面是js代码，则会当做js代码来执行，但在innerTest后面的js代码会被当做普通 文本来输出 <style type="text/css"> #div_01{ background-color: aqua; ...
innerTex与innerHTML区别
weixin_42607969的博客
02-14 745
innerText 和 innerHTML 都是用来获取或设置 HTML 元素内部的内容，但它们有一些重要的区别： 获取内容：innerText 获取的是元素中显示的文本，它会忽略 HTML 标签。而 innerHTML 获取的是完整的 HTML 代码，包括标签。 渲染：innerText 是按照文本渲染的，它不会解析 HTML 代码。而 innerHTML 是按照 HTML 代码渲染的，它会...
JS获取/修改文本框输入的内容value，修改div标签中的内容：innerHTML、innerTest
m0_53881899的博客
08-31 1963
JS获取/修改文本框输入的内容value，修改div标签中的内容：innerHTML、innerTest
inner text和innerHTML的区别
weixin_60508127的博客
09-20 434
text：不识别标签，空格，换行。所以可以用来获取元素里面的内容，得到的元素是不包括空格.换行，标签的，所以是原原本本的内容。 而HTML：识别标签，空格，换行，可以用来改变内容，但是获取元素会有空格，标签，换行，所以这点不如text。 ...
html--innerHTML用法及和与innerText区别
Schaffer的博客
06-04 1万+
一、innerHTML用法 innerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容； 如：<div id="aa">这是内容</div> 我们可以通过 document.getElementById(‘aa’).innerHTML 来获取id为aa的对象的内嵌内容； 也可以对某对象插入内容，如 document.getElementById(‘abc’).innerHTML=’这是被插入的内容’; 这样就能向id为abc的对象插入内容。 实例： 1.获取段落p的 in
JavaScript中innerHTML，innerText，outerHTML的用法及区别
10-23
在javascript中如果我们要获取对象内容，js为我们提供了三种方法outerhtml、innerhtml和innertext,但他们之间具体怎么使用与具体的区别在哪里，可能很多人不知道吧，接下来跟着小编一起来学习innerHTML，innerText，...
javascript中innerText和innerHTML属性用法实例分析
10-24
主要介绍了javascript中innerText和innerHTML属性用法,实例分析了javascript中innerText和innerHTML属性的作用和相关的使用技巧,需要的朋友可以参考下
HTML DOM中innerHTML、textContent和innerText属性的用法与区别
青春木鱼的博客
05-21 6729
想要获取、设置标签的内容，innerHTML以及innerText、textContent都可以使用，如果在标签中设置新的html标签内容，innerText、textContent会忽略新的html标签，仅获取纯文本内容，但innerText、textContent属性会解析标签里特殊符号，把特殊符号翻译为正文。innerHTML可以获取所有的html标签内的内容，包括新的html标签，每一个字符都会原样输出，所写即所得，且新的html标签，不会被解析，也就是没有标签效果，但输出到浏览器页面会被浏览器正常
自定义属性，innerText和html 元素
qq_53842654的博客
08-13 157
innerTest不会获得子标签，只会获取文本 innerHTMl会获取子标签，会解析标签 属性操作 1对象的style dv.style.backgroundcolor 2.className 设置自定义属性 setAttribute('',""); 如果有自定义属性，对象是访问不了的，只能访问标签 啊a.setAttribute('自定义的名', 值xxx ); a标签的title有啥用 节点 nodeType: 1元素节点 2 属性节点 3文本节点 8注释节点 9文档节点 元素...
js中innerHTML与innerTex、outerHTMLt的用法与区别
teedry的专栏
11-09 1468
js中innerHTML与innerTex、outerHTMLt的用法与区别用法：    test1 test2在JS中可以使用：test.innerHTML:　　也就是从对象的起始位置到终止位置的全部内容,包括Html标签。　　上例中的test.innerHTML的值也就是“test1 test2 ”。test.innerText:　　从起始位
innerHTML在JS中用法
进击的葱
12-13 1万+
转载——https://blog.csdn.net/qq_27918787/article/details/52628311 innerHTML在JS是双向功能：获取对象的内容  或  向对象插入内容； 如：&lt;div id="aa"&gt;这是内容&lt;/div&gt; ， 我们可以通过  document.getElementById('aa').innerHTML 来获取id为aa的...
JavaScript中的innerHTML使用
qq_60115503的博客
04-17 6万+
innerHTML innerHTML属性允许更改html元素的内容,可以设置或返回表格行的开始和结束标签之间的HTML,本篇文章就来给大家介绍关于innerHTML的用法
javascript中的innerHTML是什么意思，怎么个用法？
热门推荐
奔跑的蜗牛
09-22 10万+
nnerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容； 如：这是内容 ，我们可以通过 document.getElementById('aa').innerHTML 来获取id为aa的对象的内嵌内容； 也可以对某对象插入内容，如 document.getElementById('abc').innerHTML='这是被插入的内容'; 这样就能向id为abc的对象插入内容
innerHTML与innerText的区别
idiot_MAN的博客
08-11 4587
innerHtml和innerText的区别
javascript 中innerHTML的用法
美丽的大黄人
06-25 1万+
javascript 中innerHTML的用法 语法 Object.innerHTML = “HTML”;//设置其内容 var html = Object.innerHTML;//获取其内容 例： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; ...
innerhtml与innertext的区别
最新发布
06-28
### 回答1： innerHTML和innerText都是JavaScript中常用的属性，用于获取或设置HTML元素的内容。它们的区别在于： 1. innerHTML获取或设置的是元素的HTML内容，包括标签和文本内容，而innerText只获取或设置元素的文本内容，不包括标签。 2. innerHTML可以用于修改元素的HTML结构，包括添加、删除、替换元素和属性等操作，而innerText只能修改元素的文本内容。 3. innerHTML会触发浏览器的重绘和重排，因为它会改变元素的结构和样式，而innerText只会改变元素的文本内容，不会影响元素的结构和样式。 因此，在使用innerHTML和innerText时，需要根据具体的需求选择合适的属性。如果需要修改元素的HTML结构，应该使用innerHTML；如果只需要修改元素的文本内容，应该使用innerText。 ### 回答2： innerHTML和innerText是JavaScript中常用的两个属性，都用于操作HTML元素的文本内容。但是两者有着不同的区别。 首先，innerHTML是元素的一个属性，它返回元素的HTML内容，包括HTML标签、文本和属性。它可以修改元素的HTML内容，允许插入新的HTML元素或者改变元素的样式和属性。 例如，我们可以使用innerHTML将一个段落的文本内容替换成一个新的段落标签，这个新的标签可以拥有不同的颜色、字体和文本内容。 而innerText是元素的另一个属性，返回元素的纯文本内容，没有包含任何HTML标签。与innerHTML不同，innerText不能修改HTML结构，因此它通常用于操作那些只包含文本内容的元素。 此外，innerHTML的返回结果可能会包含一些浏览器自动在HTML中添加的节点（例如空格或换行符），这些节点在innerText中是不会被包含的。 在使用innerHTML或innerText时还需要注意安全问题。由于innerHTML可以插入任意的HTML代码，因此会存在一定的安全风险，可能会受到XSS攻击。而innerText没有这个问题，因为它只能处理纯文本内容。 综上所述，innerHTML和innerText有着不同的用途和特点。我们应该根据需要选择合适的方法来操作HTML元素的文本内容，同时注意相关的安全问题。 ### 回答3： innerHTML和innerText是两个常用的Web开发术语。它们都用于处理HTML元素的内容属性，但是它们有几个不同之处。 innerHTML是一个属性，它表示某个元素的HTML内容。这个属性可以被读、写和修改，允许我们在网页中动态地更新和改变HTML内容。这样的话，我们就可以通过编程来更新网页中的内容，而无需修改HTML文件本身。innerHTML可以引用其他元素或属性，例如文本，图像，链接，样式和脚本。innerHTML属性非常强大，它可以轻松地创建动态的HTML内容，大大简化了Web开发的工作流程。 然而，innerText是表示元素的所有文本内容，但不包括HTML标签。如果一个元素包含嵌套的标签，例如链接、段落或表格，则innerText只返回纯文本，不返回标签。跟innerHTML不同的是，innerText只能被读取，因此不能用于更改HTML内容。它通常用于获取网页中的文本内容而不包括HTML标记。 在实际应用中，如果需要动态更新网页的内容，则应使用innerHTML，它可以轻松地修改网页的结构和布局。然而，如果只需要获取网页中的文本内容，而不需要HTML标记，则应使用innerText，因为它只返回纯文本内容，不包含标签和样式。 总之，innerHTML和innerText是两个常用的Web开发术语，它们都用于处理HTML元素的内容属性。但是需要注意的是，它们之间有一些不同之处，具体使用要根据实际情况确定。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值