javascript innerHTML、outerHTML、innerText、outerText的区别

最新推荐文章于 2024-05-11 10:05:08 发布
最新推荐文章于 2024-05-11 10:05:08 发布
阅读量93 收藏
点赞数
文章标签： javascript ViewUI

1、功能讲解: 
innerHTML 设置或获取位于对象起始和结束标签内的 HTML 
outerHTML 设置或获取对象及其内容的 HTML 形式 
innerText 设置(包括标签)或获取(不包括标签)位于对象起始和结束标签内的文本 
outerText 设置(包括标签)或获取(不包括标签)对象的文本 

2、示例 

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4 <title> Demo </title>
 5 <script language = "JavaScript">
 6     function innerHTMLDemo() {
 7         alert(document.getElementById('test_id1').innerHTML);
 8         <!-- <span>innerHTML效果.</span> -->
 9         test_id1.innerHTML = "<i><u>设置或获取位于对象起始和结束标签内的 HTML.</u></i>";
10         <!-- innerHTML表示是当前tag里面所有的内容(包含的内容中有其他的html标签那就也包含该标签)，替换的时候就全部替换 -->
11         <!-- 浏览器会对包含的html标签进行解释 -->
12         alert(document.getElementById('test_id1').innerHTML);
13         <!-- <li id="test_id1" οnclick="innerHTMLDemo()"><i><u>设置或获取位于对象起始和结束标签内的 HTML.</u></i></li> -->
14     }
15     function innerTextDemo() {
16         alert(document.getElementById('test_id2').innerText);
17         <!-- innerHTML效果. -->
18         test_id2.innerText = "<i><u>设置(包括标签)或获取(不包括标签)位于对象起始和结束标签内的文本.</u></i>";
19         <!-- innerText表示是当前tag里面所有的文本内容(包含的内容中有其他的html标签那就不包含该标签)，但是替换的时候就替换包括html标签 -->
20         <!-- 浏览器不会对包含的html标签进行解释 -->
21         alert(document.getElementById('test_id2').innerText);
22         <!-- <li id="test_id2" οnclick="innerTextDemo()">&lt;i&gt;&lt;u&gt;设置或获取位于对象起始和结束标签内的文本.&lt;/u&gt;&lt;/i&gt;</li> -->
23     }
24     function outerHTMLDemo() {
25         alert(document.getElementById('test_id3').outerHTML);
26         <!-- <li id = "test_id3" onclick = "outerHTMLDemo()"><span>outerHTML效果.</span></li> -->
27         test_id3.outerHTML = "<i><u>设置或获取对象及其内容的 HTML 形式.</u></i>";
28         <!-- outerHTML表示是当前tag，及其里面所有的内容(包含的内容中有其他的html标签那就也包含该标签)，替换的时候就全部替换 -->
29         <!-- 浏览器会对包含的html标签进行解释 -->
30         alert(document.getElementById('test_id3').outerHTML);
31         <!-- <i><u>设置或获取对象及其内容的 HTML 形式.</u></i> -->
32     }
33     function outerTextDemo() {
34         alert(document.getElementById('test_id4').outerText);
35         <!-- outerText效果. -->
36         test_id4.outerText = "<i><u>设置(包括标签)或获取(不包括标签)对象的文本.</u></i>";
37         alert(document.getElementById('test_id4').outerText);
38         <!-- outerText表示是当前tag，及其里面所有的内容(包含的内容中有其他的html标签那就也包含该标签)，替换的时候就全部替换 -->
39         <!-- 浏览器不会对包含的html标签进行解释 -->
40         <!-- &lt;i&gt;&lt;u&gt;设置(包括标签)或获取(不包括标签)对象的文本.&lt;/u&gt;&lt;/i&gt; -->
41     }
42 </script>
43 </head>
44 <body>
45     <ul>
46         <li id = "test_id1" onclick = "innerHTMLDemo()"><span>innerHTML效果.</span></li>
47         <li id = "test_id2" onclick = "innerTextDemo()"><span>innerText效果.</span></li>
48         <li id = "test_id3" onclick = "outerHTMLDemo()"><span>outerHTML效果.</span></li>
49         <li id = "test_id4" onclick = "outerTextDemo()"><span>outerText效果.</span></li>
50     </ul>
51 </body>
52 </html>

3、不同之处: 
简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于： 
1）、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会。 
2)、在设置时，innerHTML与innerText仅设置标签内的文本，而outerHTML与outerText设置包括标签在内的文本。 

特别说明： 
　　innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例： 
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>

 

另外举个例子来说吧。
<div>
    <span>内容</span>
</div>
使用这几个来获取上面div的内容的话，区别如下：
innerHTML:     <span>内容</span>，带有html标签
innerText:        内容 不带html标签
outerHTML:     <div><span>内容</span></div>
outerText:        获取元素跟innterText是一样的。

使用这几个来改变某个元素的内容
<div id="test"></div>
innerHTML="<i>内容</i>"
//<div id="test"><i>内容</i></div>     展示出来的是斜体的“内容”，i作为html标签解析了

innerText="<i>内容</i>" 
//<div id="test"><i>内容</i></div>     展示的内容为“<i>内容</i>”，i没有作为html的标签解析，而是直接输出了。

outerHTML="<i>内容</i>"
//<i>内容</i>                         就是替换了外面的标签，同时i会被解析，展现一个斜体的“内容”

outerText="<i>内容</i>" 
//替换外面的标签，i没有解析，页面显示“<i>内容</i>”

注意outerHTML、innerText不是W3C标准，使用时请注意浏览器兼容性！
weixin_33794672
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html innerHTML outerHTML innerText outerText等的区别及实例汇总
09-29
html js innerHTML outerHTML innerText outerText 等的区别及实例汇总
innterText 和 innterHTML 区别
S_xiajinghan的博客
03-28 2562
设置文字内容用innterText  或者 innterHTML 都可以设置标签内容用innterHTML获取文字内容用innterText  或者 innterHTML 都可以获取标签价文字内容用innterHTML
innerText,innerHTML和value的区别，以及如何获取下拉框中选中的项的文本内容。
Csdn_____c的博客
09-12 1343
一、innerText和innerHTML异同点： 相同点：二者都可以获取到标签内包含的文本值。 从结果可以看出二者都是获取到了h1标签内的文本h1，并且二者相等，说明两个方法拿出来的内容都是以相同的形式展现。 不同点：innerText是获取到标签内的文本节点的值，而innerHTML是获取到标签内所有的内容，包括了子元素标签本身也会被获取到，如下图： 从输出结果可以看出innerText可以获取到本身标签内部包含的所有文本值，但是不包含子元素的标签，而...
innerText和innerHTML的区别
m0_51490605的博客
02-09 1213
innerText是输出其中的所有文字并且不会识别html标签。并且会自动取消所有的换行和空格。 而innerHtml可以识别所有的html标签，并且不会取消换行和空格。
JS中的innerHTML和innerText
胡振涛
03-04 1382
今天在进行DOM总结的时候遇到了innerHTML，由于在前几天看到了小伙伴总结了一篇关于innerHTML和innerText的博客总结，于是自己也开始搜查资料做一个小小的总结。 1.innerHTML可获取或设置指定dom元素标签内的 html内容，从该元素标签的起始位置到终止位置的全部内容(包含html标签)。 获取元素的内容：element.innerHT...
JS中的innerHTML，innerText，value的区别
gabby____的博客
09-08 3万+
一、区别 innerHTML 在控件中加html代码 ,就是设置一个元素里面的HTML,标签对文本信息有效。 innerTEXT 打印标签之间的纯文本信息，显示标签，标签无效，低版本的火狐浏览器不支持。 value 显示双引号中的全部内容，显示标签，标签无效。 二、举例 例一 1、innerHTML &lt;!doctype html&gt; &lt;html lan...
innerHTML,outerHTML,innerText,outerText的用法及区别解析
09-04
本篇主要是对innerHTML,outerHTML,innerText,outerText的用法及区别进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
innerHTML、outerHTML、innerText、outerText的用法与区别
05-09
innerHTML、outerHTML、innerText、outerText的用法与区别.doc
js中innerHTML与innerText的用法与区别
qq_45587146的博客
10-30 4572
在js中，innerHTML属获取性的是元素对象内包含html代码的内容，innerText属性只获得元素对象内的文本内容。下面通过代码演示讲解js中innerHTML与innerText的用法与区别。 首先创建一个html文件，html文件内，使用div创建一个模块，在div内，使用span标签创建一行测试的文字。 ...
innerText 使用
csdt_csdt的专栏
01-22 5713
function showTime(){ //在元素间的文本就是通过 对象 .innerText document.getElementById("mytime").innerText = new Date().toLocaleString(); } setInterval("showTime()",1000);
innerText 与 innerHtml的区别 （一）
安静的对折的专栏
09-16 4万+
innerText  与 innerHtml 都是打印标签之间的文本信息 1、innerText 打印标签之间的纯文本信息，会将标签过滤掉，低版本的火狐浏览器不支持，而是支持textContent Document 这是P标签 这是P标签 这是P标签 var box = docu
textContent和innerText属性的区别
dexing07的博客
09-12 2万+
实例1：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> </title> </meta> </head> <body> <div class="test" id="test"> tes
DOM--操作元素--innerText和innerHTML及其区别；常用元素的属性操作；表单元素的属性操作；样式属性操作；通过className更改元素样式
qq_43968060的博客
07-25 440
操作元素： JavaScript的DOM操作可以改变网页内容，样式和结构，我们可以利用DOM 操作元素来改变元素里面的内容属性等。 改变元素的内容 element.innerText 从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉。 element.innterHTML 起始位置到终止位置的全部内容，包括HTML标签，同时保留空格和换行 案例：innerText <!DOCTYPE html> <html lang="en"> <head&g
js中的innerHTML，innerText，value的区别
汪振海的专栏
05-04 1万+
首先先说一下 我自己认为的  innerHTML，innerText，value的区别 innerHTML  是在控件中加html代码  就是设置一个元素里面的HTML eg: Insert title here My First Web Page My First Paragraph. document.getElementById("demo").innerHTML="M
innerHTML与innerText区别
热门推荐
蜗牛学习笔记
03-08 8万+
innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。 innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。 同时，innerHTML 是所有浏览器都支持的，innerText 是IE浏览器和chrome 浏览器支持的，Firefox浏览器不支持。其实，innerHTML 是W3C 组织规定的属性；而innerText 属性是IE浏览器自己的属性，不过后来的浏览器部分实现这个属性罢了。
document.write与document.getElementById.innterHTML的区别
weixin_34365635的博客
06-23 132
  &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;script&gt; var tmp = "&lt;iframe src='http://www.cnblogs.com/kaituorensheng/'&gt;&lt;/iframe&gt;";
innerText，innerHTML的用法以及注意事项
w36680130的博客
08-10 2315
我们常常需要使用另外一些对象的属性来实现动态改变其中的文本,它们就是：innerText，outerText，innerHTML，outerHTML，千万要注意它们的大小写，因为错一点您就得
TypeScript中的函数类型注解：精确定义行为与意图
最新发布
逐星的博客
05-11 317
在TypeScript中，函数不仅是一段执行特定任务的代码块，它们还可以拥有自己的类型。函数类型注解允许开发者定义函数的参数类型和返回值类型，从而提高代码的可读性和可维护性。函数类型注解是TypeScript中定义函数时的重要特性，它有助于确保函数参数和返回值符合预期，从而提高代码的准确性和安全性。
innerhtml与innertext的区别
06-28
innerHTML和innerText都是JavaScript中常用的属性，用于获取或设置HTML元素的内容。它们的区别在于： 1. innerHTML获取或设置的是元素的HTML内容，包括标签和文本内容，而innerText只获取或设置元素的文本内容，不...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值