innerHTML、innerText和outerHTML、outerText的区别-阿里云开发者社区

开发者社区> 木头先生> 正文

innerHTML、innerText和outerHTML、outerText的区别

简介: 区别描述如下:  innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取位于对象起始和结束标签内的文本 outerText 设置(包括标签)或获取(不包括标签)对象的文本 示例代码       ...
+关注继续查看

区别描述如下: 

innerHTML 设置或获取位于对象起始和结束标签内的 HTML

outerHTML 设置或获取对象及其内容的 HTML 形式

innerText 设置或获取位于对象起始和结束标签内的文本

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

示例代码 

<!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> 

不同之处:  

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

 

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
8667 0
ES6新特性:var与let区别
1.let的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。var定义的变量为全局变量。 2.var在同一块可以重复定义,let不能 //正常 function () { var a = 10; var a = 1; } // 报错 function () { ...
1030 0
mysql中char,varchar,text区别总结
具体对这三种类型的说明不做阐述可以查看mysql帮助文档。 char的总结:      char最大长度是255字符,注意是字符数和字符集没关系。可以有默认值,尾部有空格会被截断。varchar的总结:      varchar的最大长度65535是指能存储的字节数,其实最多只能存储65532个字节,还有3个字节用于存储长度。
959 0
HttpContext.Cache和Application的区别
原文:HttpContext.Cache和Application的区别 (转载)  应用程序级的Cache和Application用户会话级的Sessionapplication的缺点是在读取时最好使用lock,unlock,损失性能的很。
833 0
Inner Join, Left Outer Join和Association的区别
测试用的CDS视图的源代码,第8行用Inner Join连接TJ02T, 后者存放了所有系统状态的ID和描述。 Inner Join测试结果:对于那些在TJ02T里没有维护描述信息的状态,它们不会出现在结果集里。
1444 0
+关注
138
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载