innerHTML、innerText和outerHTML、outerText的区别

最新推荐文章于 2022-02-05 09:13:38 发布
最新推荐文章于 2022-02-05 09:13:38 发布
阅读量622 收藏
点赞数 1
分类专栏： Javascript 文章标签： 胡博君 javascript innerHTML innerText outerHTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/laokdidiao/article/details/51153639
版权
1、区别描述如下： 

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

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


2、示例代码 

<span style="font-size:14px;"><!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" ο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>  </span>

运行的结果：



分别点击每一个效果：






我们可以发现：


innerHtml设置了li中的内容，并且内容呈现为HTML格式。


innerText设置为li中的文本内容，并且不显示为HTML格式。


outerHTML则直接取代了li，并且以新的HTMl格式内容取代li和li以下所有内容


outerText则是取代了li，并且以字符串的形式覆盖li的所有内容

Hello 程序猿
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
innerHTML和innerText的用法和区别
TobEABetterMan_的博客
02-15 1257
文章目录前言一、innerHTML 和 innerText是什么？二、使用步骤1.innerHTML简单示例2.innerText简单示例总结 前言 在学习JavaScript的过程中，不可避免的要使用到dom操作，那么这里来讲一讲HTML DOM innerHTML 和 innerText 使用与区别 提示：以下是本篇文章正文内容，下面案例可供参考 一、innerHTML 和 innerText是什么？ innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML;其实两者之间的区别 i
JavaScript学习 — innerHTML与innerText区别
weixin_67614925的博客
05-20 2264
文章目录各自功能实例区别 各自功能 innerHTML：设置或获取元素内的所有子节点（包括标签、注释和文本节点）。 innerText：获取元素的文本，会过滤掉所以标签，将文档树中的所有文本拼接起来，设置时会把元素所以子节点都删除再重写，利用这一点，可以通过 innerText 属性过滤掉 HTML 标签。 实例区别 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8">
JavaScript之innerHTML和outerHTML，innerText和outerText
weixin_50464560的博客
07-02 997
document对象中有innerHTML、innerText这两个属性，都是获取document对象文本内容，但使用起来还是有区别的； 区别 1） innerHTML设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容，包括HTML标签，但不包括自身) 2） outerHTML设置或获取标签自身及其所包含的HTML+文本信息（包括自身） 3） innerText设置或获取标签所包含的文本信息（从标签起始位置到终止位置的内容，去除HTML标签，但不包括自身） 4） outerText设
innerHTML、innerText、outerHTML、outerText区别
菜鸟程序员成长路
10-24 6556
1、区别： （1） innerHTML 设置或获取位于对象起始和结束标签内的 HTML，例子： &lt;div id="div1"&gt;hello world&lt;/div&gt; &lt;div id="div2"&gt; &lt;span&gt;BEI&lt;/span&gt; &lt;p&gt;JING&lt;/p&gt; &lt;/
innerHTML和outerHTML以及innerText和outerText之间的区别
weixin_47450807的博客
02-05 838
一、innerHTML和outerHTML的关系 在面试中也常常问道innerHTML和outerHTML之间的区别，这里我们总结一下。innerHTML表示内部文本，如下所示。 <div><h1>大家好</h1></div> 其打印其innerHTML的值为： <h1>大家好</h1> outerHTML表示外部文本，包含标签。 其打印outerHTML的值为: <div><h1>大家好</h1&gt
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设置或获取标签所包含的...
大神如何阅读源码
laokdidiao的专栏
05-14 9735
以下是我搜集的各种方法，我将一一尝试，会根据尝试结果，做个总结，与大家一起分享： 1、腾讯IMWEB负责人说： 首先，搞清楚自己要读懂他们的原因和动机。 其次，可以先看下这些优秀框架或者库的设计文档和架构图，这样会让你宏观上对一些概念有些认识。  然后，从你最感兴趣的一个点，开始设置断点，跟进去看发生了哪些事情。 和架构设计哪一块是match的。 有人补充：最快，最易懂方法。
介绍一个性能飞快的移动端滑屏组件iSlider.js
laokdidiao的专栏
04-17 8883
islider功能介绍： /** * iSlider 高性能全屏滑动组件 * @class iSlider * @param {object} opts * @param {string} opts.wrap='.wrap' 容器 * @param {string} opts.item='.item' 滚动单元的元素 * @param {string} opts.pla
JavaScript 移动和触摸框架
laokdidiao的专栏
04-14 7013
jQuery Mobile : 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说：能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。我们将尽全力去满足这样的需求。
比较正宗的验证邮箱的正则表达式js代码详解
laokdidiao的专栏
04-18 5642
这个比较简单的，应付个面试基本足够： /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/  拿代码去测试一下吧： function isEmail(str){ var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/; return reg.tes
Js中em与px的区别
laokdidiao的专栏
01-05 3531
欢迎大家收看我的在线Java全套免费教学超清视频： http://v.youku.com/v_show/id_XODQ1NjU0NDc2.html 这是其中的一个视频连接，大家可以拖动到优酷视频下方，订阅我的账号，因为以后我会有更多视频免费提供 百度搜索：输入Fcs_D调的码农 ，或者输入"胡博君"就能看到我的很多视频 或者加我的微信号：fcsboy 我可以及时通过微信通知你们 QQ学习群：237053693
call、aplly、caller、callee分别是什么？
laokdidiao的专栏
04-19 1209
call和aplly的区别： 概念： call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的，换句话说，就是为了改变函数体内部 this 的指向。因为 JavaScript 的函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。二者的作用完全一样，只是接受参数的方式不太一样。 例如： 有一个函数
胡博君简单总结JS中的分享到代码
laokdidiao的专栏
01-06 1114
欢迎大家收看我的在线Java全套免费教学超清视频： http://v.youku.com/v_show/id_XODQ1NjU0NDc2.html 这是其中的一个视频连接，大家可以拖动到优酷视频下方，订阅我的账号，因为以后我会有更多视频免费提供 百度搜索：输入Fcs_D调的码农 ，或者输入"胡博君"就能看到我的很多视频 或者加我的微信号：fcsboy 我可以及时通过微信通知你们 QQ学习群：237053693
50 天学习 50 个项目 - HTML/CSS and JavaScript
laokdidiao的专栏
07-18 973
???? ???? ???? 项目源代码，点击【Github 原文链接】 所有项目如下所示： # 项目 在线演示 01 Expanding Cards Live Demo 02 Progress Steps Live Demo 03 Rotating Navigation Animation Live Demo 04 Hidden Search Widget Live Demo 05 Blurry Loading Live Demo 06 Scroll Animation
胡博君收集JS中的响应事件
laokdidiao的专栏
01-07 899
欢迎大家收看我的在线Java全套免费教学超清视频： http://v.youku.com/v_show/id_XODQ1NjU0NDc2.html 这是其中的一个视频连接，大家可以拖动到优酷视频下方，订阅我的账号，因为以后我会有更多视频免费提供 百度搜索：输入Fcs_D调的码农 ，或者输入"胡博君"就能看到我的很多视频 或者加我的微信号：fcsboy 我可以及时通过微信通知你们 QQ学习群：237053693
胡博君浅谈Js获取当前时间方法集合
laokdidiao的专栏
01-13 762
欢迎大家收看我的在线Java全套免费教学超清视频： http://v.youku.com/v_show/id_XODQ1NjU0NDc2.html 这是其中的一个视频连接，大家可以拖动到优酷视频下方，订阅我的账号，因为以后我会有更多视频免费提供 百度搜索：输入Fcs_D调的码农 ，或者输入"胡博君"就能看到我的很多视频 或者加我的微信号：fcsboy 我可以及时通过微信通知你们 QQ学习群：237053693
innerHTML和innerText有什么区别
最新发布
05-25
innerHTML 和 innerText 都是用于获取或设置 DOM 元素的文本内容的属性，但它们之间有一些区别： 1. innerHTML 返回 HTML 代码，而不仅仅是文本。如果元素包含其他元素或标记，那么 innerHTML 将返回包含这些元素或...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值