innerHTML、innerText和outerHTML、outerText的区别

最新推荐文章于 2022-02-05 09:13:38 发布
最新推荐文章于 2022-02-05 09:13:38 发布
阅读量137 收藏
点赞数
分类专栏： html javascript 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/heikeji/article/details/84384033
版权

1、区别描述如下：

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

      innerText和outerText在获取时是相同效果，但在设置时，innerText仅设置标签内的文本，而outerText设置包括标签在内的文本。

2、示例代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> innerHTML、innerText和outerHTML、outerText的区别 </TITLE>
  <script type="text/javascript">
	//.innerHTML
	function innerHTMLDemo(){
		test_id1.innerHTML="<i><u>设置或获取位于对象起始和结束标签内的HTML.</u></i>";
	}
	//.innetText
	function innerTextDemo(){
		test_id2.innerText="<i><u>设置或获取位于对象起始和结束标签内的文本.</u></i>";
	}
	//.outerHTML
	function outerHTMLDemo(){
		test_id3.outerHTML="<font size=9pt color=red><i><u>设置或获取位于对象及其内容的HTML形式.</u></i></font>"
	}
	//.outerText
	function outerTextDemo(){
		test_id4.outerText="<br><i><u>设置（包括标签）或获取（不包括标签）对象的文本.</u></i>";
	}
  </script>
 </HEAD>

 <BODY>
  <ul>
	<li id="test_id1" οnclick="innerHTMLDemo()">innerHTML效果.</li>
	<li id="test_id2" οnclick="innerTextDemo()">innerText效果.</li>
	<li id="test_id3" οnclick="outerHTMLDemo()">outerHTML效果.</li>
	<li id="test_id4" οnclick="outerTextDemo()">outerText效果.</li>
  </ul>
 </BODY>
</HTML>

 
3、不同之处:　
   简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于：
　　1）、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会。
　　2)、在设置时，innerHTML与innerText仅设置标签内的文本，而outerHTML与outerText设置包括标签在内的文本。
    对于一个id为"testdiv"的div来说，outerHTML、innerHTML以及innerTEXT三者的区别可以通过下图展示出来：

 

 

heikeji
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
你不知道的outerText,innerText 区别说明
12-29
首先，看我们的html定义     <div id=diva>     <div id=div1>      <a>innerHTML,innerText,outerHTML,outeterText</a>      <input type =button  onclick =inner() value=inner  />      <input type =button onclick =outer() value=outer />     </div>       </div>   js源码如下:     function inner()     {   
innerHTML,outerHTML, innerText,outerText 的区别
anji7380的博客
10-30 116
-innerHTML 设置或获取位于对象起始和结束标签内的 HTML - outerHTML 设置或获取对象及其内容的 HTML 形式 - innerText 设置或获取位于对象起始和结束标签内的文本 - outerText 设置(包括标签)或获取(不包括标签)对象的文本 innerText和outerText在获取时是相同效果，但在设置时，innerText仅设置标签内的文本，...
outerText和innerText的区别。
无尽的代码--------mandolin`s coding life
06-11 2874
    对于DOM对象的这两个属性，初学者往往会感到疑惑，因为通过它们所获得的值没有任何区别。　    实际上，只要理解了它们各自的含义，就不难辨别了。    某元素的innerText指的是由其元素的开始标签和结束标签所包含的那一段HTML代码被去除格式后的纯文本。       outerText与其不同的是它包含元素的开始和结束标签。　    在取值的时候两者没有任何区别，但在赋值的时候就很容
innerText 和outerText 的区别
fangyp
02-05 464
&lt;html&gt; &lt;head&gt; &lt;title&gt;A test for innerText, outerText method&lt;/title&gt; &lt;script language='javascript'&gt; &lt;!-- function getInnerText(objectID){ var divTextObject=d...
javascript innerHTML、outerHTML、innerText、outerText的区别
10-30
JavaScript中的innerHTML、outerHTML、innerText和outerText是四个用于操作HTML元素内容的属性，它们各自有不同的功能和用途。 1. innerHTML： - innerHTML允许我们获取或设置一个元素内部的HTML内容。当我们设置...
innerHTML,outerHTML,innerText,outerText的用法及区别解析
09-04
在JavaScript中，`innerHTML`, `outerHTML`, `innerText`, 和 `outerText` 是四个非常重要的属性，用于操作HTML元素的内容。下面将详细解释这些属性的用法和它们之间的区别。 1. **innerHTML** - `innerHTML` 属性...
html innerHTML outerHTML innerText outerText等的区别及实例汇总
09-29
html js innerHTML outerHTML innerText outerText 等的区别及实例汇总
详谈innerHTML innerText的使用和区别
08-29
document对象中有innerHTML、outerHTML、innerText和outerText四个属性，它们之间的区别和使用方法是开发者必须掌握的知识。 首先，让我们来了解innerHTML和outerHTML这两个属性。innerHTML设置或获取标签所包含的...
innerHTML和outerHTML以及innerText和outerText之间的区别
weixin_47450807的博客
02-05 840
一、innerHTML和outerHTML的关系 在面试中也常常问道innerHTML和outerHTML之间的区别，这里我们总结一下。innerHTML表示内部文本，如下所示。 <div><h1>大家好</h1></div> 其打印其innerHTML的值为： <h1>大家好</h1> outerHTML表示外部文本，包含标签。 其打印outerHTML的值为: <div><h1>大家好</h1&gt
innerHTML、outerHTML、innerText、outerText的用法与区别
05-09
innerHTML、outerHTML、innerText、outerText的用法与区别.doc
outerText,innerText 区别说明
hqmln的博客
05-05 166
 首先，看我们的html定义     &lt;div id="diva"&gt;     &lt;div id="div1"&gt;      &lt;a&gt;innerHTML,innerText,outerHTML,outeterText&lt;/a&gt;      &lt;input type ="button"  onclick ="inner()
你不知道的outerText,innerText
weixin_30463341的博客
06-14 63
首先，看我们的html定义 <div id="diva"> <div id="div1"> <a>innerHTML,innerText,outerHTML,outeterText</a> <input type ="button" onclick ="inner()" value="inner" />...
innerHtml,outerHtml,innerText,outerText之间的区别
weixin_45810135的博客
09-10 174
innerHtml,outerHtml,innerText,outerText之间的区别 下面展示一些 代码 写一个简单的div标签嵌套一个P标签 /*html 代码*/ <div id="box"> <p>我是一个P</p> </div> 下面是JS代码，通过控制台输出结果观察他们的不同之处 // js 代码 var obox=document.getElementById('box'); console.log(obox.innerHTML) /
JavaScript 之 innerHTML、outerHTML、innerText、outerText的区别
紫陌520的博客
07-16 446
&amp;amp;amp;amp;nbsp; &amp;amp;amp;amp;nbsp; 今天看了很多文章关于innerHTML、outerHTML、innerText、outerText的区别，都是很模糊的一个介绍，所以自己总结下这些区别以及一些重点内容。很多文章在描述这些区别的时候，都是只针对一点进行描述，所以很难完全理解这些的字面含义以及区别点。 一、区别...
JavaScript中innerHTML、outerHTML、innerText、outerText的用法与区别认识
johnchow2017的博客
04-25 3028
2017百度前端技术学院（js任务一） 一、JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系？ 在JS中很容易将以上几者记错弄混，在网上找了解释也很抽象，如以下： innerHTML 设置或获取位于对象起始和结束标签内的 HTML  innerText 设置或获取位于对象起始和结束标签内的文
innerHTML与innerText的异同
weixin_33751566的博客
04-01 75
在一道面试题中看到的。 1、功能讲解: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取位于对象起始和结束标签内的文本 outerText 设置(包括标签)或获取(不包括标签)对象的文本 2、示例  1 &lt;html&gt; 2 &lt;head&gt; 3 &...
innerText、outerText与innerHTML、outerHTML
weixin_56505845的博客
04-27 567
innerText、outerText与innerHTML、outerHTML 1、取值 innerText和outerText取值都是对象起始和结束标签内部的文本内容，而innerHTML取值是对象起始和结束标签内部的html，不包括对象本身的起始标签和结束标签，outerHTML取值是也是html，但是包括对象本身的起始标签和结束标签，具体如下： <div id="out">这是div文本 <span>这是span文本</span> </div> l
HTML属性详解：innerHTML、outerHTML、innerText与outerText的区别
"了解JavaScript中的innerHTML、outerHTML、innerText和outerText属性的用法及它们之间的差异对于前端开发至关重要。这些属性允许我们操作DOM元素的内容和结构。以下是对这些属性的详细解释： 1. innerHTML: - ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值