innerHTML与outerHTML,innerText与outerText的区别

最新推荐文章于 2021-07-02 21:31:11 发布
最新推荐文章于 2021-07-02 21:31:11 发布
阅读量728 收藏
点赞数
分类专栏： 学习体会 文章标签： function html javascript
1 、功能讲解:

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

2、示例

<html>  
<head>  
<title>Demo</title>  
<style><!--  
body {font-family:"宋体";color="blue";font-size="9pt" } 
--> </style>  
<script language="JavaScript">  
//.innerHTML
function  innerHTMLDemo()
{ 
 test_id1.innerHTML="<i><u>设置或获取位于对象起始和结束标签内的 HTML.</u></i>" ; 
} 
//.innerText
function  innerTextDemo()
{ 
 test_id2.innerText="<i><u>设置或获取位于对象起始和结束标签内的文本.</u></i>" ; 
} 
//.outerHTML
function  outerHTMLDemo()
{ 
 test_id3.outerHTML="<i><u>设置或获取对象及其内容的 HTML 形式.</u></i>" ; 
}
//.outerText
function  outerTextDemo()
{ 
 test_id4.outerText="<i><u>设置(包括标签)或获取(不包括标签)对象的文本.</u></i>" ; 
}
</script>  
</head>  
<body>  
<ul>  
<li id="test_id1" onclick="innerHTMLDemo()">innerHTML效果.</li>  
<li id="test_id2" onclick="innerTextDemo()">innerText效果.</li>  
<li id="test_id3" onclick="outerHTMLDemo()">outerHTML效果.</li>  
<li id="test_id4" onclick="outerTextDemo()">outerText效果.</li>  
</ul>  
</body>  
</html>

3、不同之处:

简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于：

1）、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会。

2)、在设置时，innerHTML与innerText仅设置标签内的文本，而outerHTML与outerText设置包括标签在内的文本。

 
green_lemon
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
innerHTML与outerHTML的区别
延宾的博客
04-14 2105
一、区别： 1）innerHTML: 　　从对象的起始位置到终止位置的全部内容,不包括Html标签。 2）outerHTML: 　　除了包含innerHTML的全部内容外, 还包含对象标签本身。 二、例子：   test1 test2  1）innerHTML的值是“test1 test2 ” 2）outerHTML的值是test1 test2
innerHTML和outerHTML
songdj89的专栏
07-28 425
TableRow 对象代表一个 HTML 表格行。而innerHTML是TableRow 对象的一个属性，t
innerHTML和outerHTML、innerText与outerTex
jing_xin的专栏
04-12 1823
innerHTML、outerHTML、innerText、outerText的区别(2009-02-26 21:29:32)标签：it 分类：JavaScript 下面的内容是网上找的，看完之后我的理解就是inner是指标签内的内容（不包括标签对象本身），outer是指标签对象本身及其标签里面的内容（包括标签对象本身）。 1、功能讲解: innerHTML 设置或获取位于对象起始和结束标签内的
JavaScript之innerHTML和outerHTML，innerText和outerText
weixin_50464560的博客
07-02 966
document对象中有innerHTML、innerText这两个属性，都是获取document对象文本内容，但使用起来还是有区别的； 区别 1） innerHTML设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容，包括HTML标签，但不包括自身) 2） outerHTML设置或获取标签自身及其所包含的HTML+文本信息（包括自身） 3） innerText设置或获取标签所包含的文本信息（从标签起始位置到终止位置的内容，去除HTML标签，但不包括自身） 4） outerText设
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` 属性...
innerHTML、outerHTML、innerText、outerText的用法与区别
05-09
.innerHTM、outerHTML、innerText、outerText的用法与区别 .innerHTML、outerHTML、innerText、outerText是HTML文档对象模型（DOM）中四个常用的属性，它们都是用来操作HTML元素的内容的，但它们之间有着很大的区别...
innerHTML, outerHTML, innerText, outerText, textContent
little_little0_0的博客
11-19 451
标题中提到的这些属性都是用来获取元素内容的，那么它们的区别是什么呢？各大浏览器的兼容性又是怎么样的呢？ innerHTML/outerHTML 首先，我们说说对innerHTML的赋值操作：先对拥有该属性的元素从标签开始处到标签结束处进行模式匹配，然后将处理后的值赋予给innerHTML属性（除了单独的&lt;, &gt;, &amp;会被转换为实体名外，其他内容会被原封不动地赋给innerH...
innerHTML和outerHTML区别
时光的博客
09-16 1万+
 1.innerHTML &lt;body&gt; &lt;p&gt;你好&lt;/p&gt; &lt;div id="test"&gt;&lt;h5&gt;就是喜欢你&lt;/h5&gt;&lt;/div&gt; &lt;script type="text/javascript"&gt; var hj=document
innerHTML与outerHTML 的区别？
责任与担当
07-25 753
1.innerHTML <body> <p>你好</p> <div id="test"><h5>就是喜欢你</h5></div> <script type="text/javascript"> var hj=document.getElementById("test").innerHT...
innerHTML和outerHTML的区别
时清云的博客
07-05 1708
为什么要总结innerHTML和outerHTML的区别呢，主要是在看vue.js官方文档时，看到生命周期时 )] 原生的方法有点忘了，所以要重拾起来。 示例如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
innerHTML和outerHTML有什么区别
热门推荐
william_n的博客
04-24 2万+
就是用来了解innerHTML和outerHTML有什么区别。
innerHtml与outerHtml的区别
一天进步一点点
01-23 166
innerHTML：得出调用该方法的节点下的HTML代码，但不包括该节点本身的HTML代码 outerHTML:得出调用该方法的节点及该节点下的HTML代码 [img]http://dl.iteye.com/upload/attachment/197491/cfab658a-0b3d-379f-b48c-dc5aeb24dc5e.gif[/img] Demo: [code=...
outerHtml和innerHtml的区别
xwygn的专栏
08-25 1203
outerHTML    图 例分析outerHTML的用法——与innerHTML不同，outerHTML包括整个标签，而不仅限于标签内部的内容。对于一个id 为"testdiv"的div来说，outerHTML、innerHTML以及innerTEXT三者的区别可以通过右
innerhtml与outerhtml的区别
qq_42459832的博客
01-12 3687
一、区别： 1）innerHTML: 　　从对象的起始位置到终止位置的全部内容,不包括Html标签。 2）outerHTML: 　　除了包含innerHTML的全部内容外, 还包含对象标签本身。 二、例子1： <div id="test"> <span style="color:red">test1</span> test2 </div> 1）innerHTML的值是“<span style="color:red">test1</
JavaScript中innerHTML、outerHTML、innerText、outerText的用法与区别认识
johnchow2017的博客
04-25 3025
2017百度前端技术学院（js任务一） 一、JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系？ 在JS中很容易将以上几者记错弄混，在网上找了解释也很抽象，如以下： innerHTML 设置或获取位于对象起始和结束标签内的 HTML  innerText 设置或获取位于对象起始和结束标签内的文
innerhtml与innertext的区别
最新发布
06-28
innerHTML和innerText都是JavaScript...因此，在使用innerHTML和innerText时，需要根据具体的需求选择合适的属性。如果需要修改元素的HTML结构，应该使用innerHTML；如果只需要修改元素的文本内容，应该使用innerText。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值