innerHTML、innerText、outerHTML、outerText区别

最新推荐文章于 2022-11-23 10:29:29 发布
最新推荐文章于 2022-11-23 10:29:29 发布
阅读量6.5k 收藏 11
点赞数 4
分类专栏： 前端知识 文章标签： HTML5

1、区别：

（1） innerHTML 设置或获取位于对象起始和结束标签内的 HTML，例子：

<div id="div1">hello world</div>
<div id="div2">
<span>BEI</span>
<p>JING</p>
</div>

执行console.log(document.getElementById('div1').innerHTML);输出：hello world
执行console.log(document.getElementById('div2').innerHTML);输出：<span>BEI</span><p>JING</p>
执行document.getElementById('div1').innerHTML=‘qingdao’会设置div1中的内容为：qingdao
执行document.getElementById('div1').innerHTML='<div>'+'qingdao'+'</div>',此时页面显示的内容依旧是qingdao,标签名会自动解析，不会输出。     

（2）outerHTML 设置或获取对象及其内容的 HTML 形式，例子：

执行console.log(document.getElementById('div1').outerHTML);输出：
<div id="div1">hello world</div>
执行console.log(document.getElementById('div2').outerHTML);输出：
<div id="div2">

<span>BEI</span>

<p>JING</p>

</div>
与innerHTML不同的是，对象本身的标签也包含进去了。在设置outerHTML时，和innerHTML一样

（3）innerText 设置或获取位于对象起始和结束标签内的文本，例子：

执行console.log(document.getElementById('div1').innerText);输出：hello world
执行console.log(document.getElementById('div2').innerText);输出：
BEI
JING
注意到区别了吗，输出div2中的内容时，标签是不包含在内的。在设置innerText时，执行：
document.getElementById('div1').innerText='<div>'+'qingdao'+'</div>';此时页面显示的内容是<div>qingdao</div>，此时标签名没有被解析，当作字符原样输出

（4）outerText 设置(包括标签)或获取(不包括标签)对象的文本

执行console.log(document.getElementById('div1').outerText);输出：hello world
执行console.log(document.getElementById('div2').outerText);输出：
BEI
JING
不过，设置outerText的值时，可以解析标签名。

2、示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>innerHTML、outerHTML和innerText、outerHTML的区别</title>  
    <script language="JavaScript" type="text/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="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>";   
　　}  
　　//.outerText  
　　function outerTextDemo()  
　　{   
　　　test_id4.outerText="<br></br><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设置包括标签在内的文本。 
    对于一个id为"testdiv"的div来说，outerHTML、innerHTML以及innerTEXT三者的区别可以通过下图展示出来：

猿来是U_U
关注
  • 4
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
innerHTML，outerHTML,innerTEXT三者之间的区别
10-31
innerHTML，outerHTML,innerTEXT三者之间的区别
javascript innerHTML、outerHTML、innerText、outerText的区别
10-30
JavaScript中的innerHTML、outerHTML、innerText和outerText是四个用于操作HTML元素内容的属性，它们各自有不同的功能和用途。 1. innerHTML： - innerHTML允许我们获取或设置一个元素内部的HTML内容。当我们设置...
innerHTML与outerHTML的区别
延宾的博客
04-14 2109
一、区别： 1）innerHTML: 　　从对象的起始位置到终止位置的全部内容,不包括Html标签。 2）outerHTML: 　　除了包含innerHTML的全部内容外, 还包含对象标签本身。 二、例子：   test1 test2  1）innerHTML的值是“test1 test2 ” 2）outerHTML的值是test1 test2
innerHTML、outerHTML、innerText、outerText的区别
JAVA天地
07-08 113
程序代码 &lt;div id="div"&gt;&lt;input name="button" value="Button" type="button"&gt;&lt;font color="green"&gt;&lt;h2&gt;This is a DIV!&lt;/h2&gt;&lt;/font&gt;
innerText 和outerText 的区别
溺水的鱼 - Later equals never.
09-26 1996
 A test for innerText, outerText methodfunction getInnerText(objectID){    var divTextObject=document.getElementById(objectID);    if(!divTextObject){        alert("innerText(): The "+objectID+" not f
innerText、outerText与innerHTML、outerHTML
weixin_56505845的博客
04-27 548
innerText、outerText与innerHTML、outerHTML 1、取值 innerText和outerText取值都是对象起始和结束标签内部的文本内容，而innerHTML取值是对象起始和结束标签内部的html，不包括对象本身的起始标签和结束标签，outerHTML取值是也是html，但是包括对象本身的起始标签和结束标签，具体如下： <div id="out">这是div文本 <span>这是span文本</span> </div> l
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、outerHTML、innerText、outerText的用法与区别
05-09
在示例中，我们可以看到，innerHTML、outerHTML、innerText、outerText的用法和区别。innerHTML和outerHTML用于获取或设置HTML元素的内容，而innerText和outerText用于获取或设置HTML元素的文本内容。 outerHTML比...
innerHTML和outerHTML的区别
时清云的博客
07-05 1714
为什么要总结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区别
Alice_sy314的博客
07-28 350
1.innerHTML 代码： 运行结果： 2.outerHTML 代码： 运行结果： 注意： 1.innerHTML 设置或获取位于对象起始和结束标签内的HTML 2.outerHTML设置或获取对象及其内容的HTML形式 3.outerHTML属性只有IE浏览器才有，其它浏du览器是不支持的 ...
innerHTML与outerHTML 的区别？
责任与担当
07-25 756
1.innerHTML <body> <p>你好</p> <div id="test"><h5>就是喜欢你</h5></div> <script type="text/javascript"> var hj=document.getElementById("test").innerHT...
innerHTML和outerHTML有什么区别
weixin_39105981的博客
11-23 693
在网站建设过程中经常遇到innerHTML和outerHTML，很多前端基础不好的分不清有什么区别。
innerHTML、outerHTML、innerText、outerText的区别及兼容性问题
热门推荐
HTMl5自由者
04-13 1万+
看了很多文章关于， 关于innerHTML、outerHTML、innerText、outerText的区别，还是很模糊的一个印象，所以自己总结下这xie
innerhtml与outerhtml的区别
qq_42459832的博客
01-12 3708
一、区别： 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</
innerHTML、innerText和outerHTML的区别
kenny.feng
03-21 337
获取值时： （1）outerHTML属性：从对象的起始位置到终止位置的全部内容，包括HTML标签和本身 （2）innerHTML 属性：从对象的起始位置到终止位置的全部内容，包括Html标签 （3）innerText属性：从起始位置到终止位置的内容，不包括Html标签 实例： <divid="test"> <span>张三</span> &l...
innerHtml与outerHtml的区别
一天进步一点点
01-23 168
innerHTML：得出调用该方法的节点下的HTML代码，但不包括该节点本身的HTML代码 outerHTML:得出调用该方法的节点及该节点下的HTML代码 [img]http://dl.iteye.com/upload/attachment/197491/cfab658a-0b3d-379f-b48c-dc5aeb24dc5e.gif[/img] Demo: [code=...
js innerhtml innertext 区别
最新发布
04-29
JavaScript 中经常使用 innerHTML 和 innerText 来操作页面元素的内容，这两个方法都可以修改元素的文本内容。它们的主要区别如下： innerHTML 属性用于获取或设置元素的 HTML 内容，包括标签和元素。使用 innerHTML 可以修改或添加元素内的 HTML 码。例如： ``` document.getElementById("myElement").innerHTML = "<p>Hello World!</p>"; ``` 这行代码将替换 id 为 myElement 的元素的 HTML 内容为一个段落标签包含的文本“Hello World！”。 而 innerText 属性只获取或设置元素的纯文本内容，这意味着标签和元素将被忽略。例如： ``` document.getElementById("myElement").innerText = "Hello World!"; ``` 这行代码将替换 id 为 myElement 的元素的文本内容为“Hello World！”，不包含任何标签。 因此，innerHTML 更常用于操作 HTML 元素的内容，而 innerText 更常用于操作纯文本元素的内容。需要注意的是，innerHTML 的使用可能会增加安全风险，因为它可以插入恶意代码到网页中。因此，在使用 innerHTML 时需要注意输入的内容来源，避免被攻击。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值