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使用体验
飞天加速计划·高校学生在家实践 ECS使用体验
14 0
一些前端开发的代码审查和意见
一些前端开发的代码审查和意见
4 0
SAP Hybris backoffice加载的zul文件和zk文件是什么东西
SAP Hybris backoffice加载的zul文件和zk文件是什么东西
8 0
Tomcat 是怎么处理js file access request的
Tomcat 是怎么处理js file access request的
7 0
使用 SAP Business Application Studio 搭建 CAP Java 开发环境
使用 SAP Business Application Studio 搭建 CAP Java 开发环境
3 0
必须掌握的前端开发基础知识,什么是字体图标?
  必须掌握的前端开发基础知识,什么是字体图标?   显示隐藏元素   display显示隐藏   none 隐藏   block 显示   隐藏后不再占有原来的位置
4 0
尝鲜!Mysql8.0竟然可以直接操作json文档了
  经过漫长的测试,即将整体迁移至Mysql8.0; Mysql8.0 对于Json操作新增/优化了很多相关Json的API操作; 阅读了一下官方文档,虽然绝大多数的JSON操作都是应用层完成,但是会一些Mysql的JSON语法,方便进行debug;选出基础的, 有价值的部分,供未来参考。   # 简单概述   不允许为null; Json格式定义与LONGBLOB or LONGTEXT类似;它的最大长度是受到max_allowed_packet所控制的;查看JSON字段所占用空间大小的函数时JSON_STORAGE_SIZE(xxx);除普通的Json操作,额外支持GeoJSON (
6 0
必须知道的css水平、垂直居中
  在网页制作中,有很多种水平、垂直居中方法,本文就归纳如下几种:   水平居中   1. 不建议用了。   2. text-align:center 在父容器里水平居中 inline 文字,或 inline 元素   3.margin:0 auto;   4.用 position 加 translate translate(-50%,-50%) 比较奇特,百分比计算不是以父元素为基准,而是以自己为基准。
4 0
+关注
118
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载