innerHTML、innerText和outerHTML、outerText的区别

yesbuy00 2013-01-22

1、区别描述如下：

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

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

2、示例代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> innerHTML、innerText和outerHTML、outerText的区别 </TITLE>
  <script type="text/javascript">
	//.innerHTML
	function innerHTMLDemo(){
		test_id1.innerHTML="<i><u>设置或获取位于对象起始和结束标签内的HTML.</u></i>";
	}
	//.innetText
	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><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三者的区别可以通过下图展示出来：
innerHTML、innerText和outerHTML、outerText的区别

yesbuy00

yesbuy00

相关推荐

JS的dom获取innerHtml和innerText的区别

<!

swiftwwj / 0评论 2019-12-29

在JavaScript中使用innerHTML的缺点是什么？

如果在JavaScript中使用innerHTML，缺点是：内容随处可见；不能像“追加到innerHTML”一样使用；即使你使用+ = like“innerHTML = innerHTML +'html'”旧的内容仍然会被html替换；整个innerHTM

WebVincent / 0评论 2019-11-17

innerHTML和innerText的用法（动态改变网页内容） (转帖)

最近在学习JavaScript，觉得innerHTML和innerText太有用了，利用它们，我们可以试自己的网页实现动态化。不过在使用的过程中，千万要注意它们的大小写，因为错一点您就得不到预期的效果了。这是全新的方法，当您掌握它以后将可随心所欲的设计动态

MrWhite0 / 0评论 2015-03-17

【转】JavaScript在IE下设置innerHTML时出现\"未知的运行时错误\"

程序代码思路大致如下,想动态的改变tr标签的innerHTML内容,但是IE却报"未知的运行时错误",让我百思不得其解.在Ajax里经常会通过innerHTML来改变界面，这个比使用DOM要简单一些。这主要是IE在对innerHTML进

srchange / 0评论 2016-04-26

用原生 JS 实现 innerHTML 功能实例详解

都知道浏览器和服务端是通过 HTTP 协议进行数据传输的，而 HTTP 协议又是纯文本协议，那么浏览器在得到服务端传输过来的 HTML 字符串，是如何解析成真实的 DOM 元素的呢，也就是我们常说的生成 DOM Tree，最近了解到状态机这样一个概念，于是

htmlman0 / 0评论 2019-04-03

JQuery填坑系列（一）：JQuery对象与DOM对象innerHTML属性

做项目时，碰到一个需求，根据一个下拉框选项的值来动态显示另一个表单元素的标题。心想着做一下选项值的判断，然后用一下innerHTML这一属性，应该就可以了。然而，我还是图样图森破，用JQuery获取到相应的对象之后并且加上innerHTML这一属性，怎么都

DolphinThinker / 0评论 2019-06-29

【速记】React解决IE浏览器svg标签不支持innerHTML操作的问题及相关拓展知识

* This source code is licensed under the MIT license found in the. * LICENSE file in the root directory of this source tree.// I

kbkiss / 0评论 2019-06-29

【转】JavaScript在IE下设置innerHTML时出现"未知的运行时错误"

程序代码思路大致如下,想动态的改变tr标签的innerHTML内容,但是IE却报"未知的运行时错误",让我百思不得其解.在Ajax里经常会通过innerHTML来改变界面，这个比使用DOM要简单一些。这主要是IE在对innerHTML进

zwq / 0评论 2016-04-26

innerhtml outhtml innerText outText 区别

innerHTML获取标签内的HTML. innerText 设置或获取位于对象起始和结束标签内的文本。innerTEXT和outerTEXT都是获取标签内的文本，相同。//alert //返回 p标签，与p标签里面的内容。<div id=&quo

WCschool官方 / 0评论 2015-07-20

javascript innerHTML、outerHTML、innerText、outerText的区别

特别说明：　　innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用

lzn / 0评论 2015-06-10

innerHTML和innerText的用法（动态改变网页内容） (转帖)

不过在使用的过程中，千万要注意它们的大小写，因为错一点您就得不到预期的效果了。这是全新的方法，当您掌握它以后将可随心所欲的设计动态内容了，不可错过哦！DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitiona

XaverSun / 0评论 2015-03-17

jQuery EasyUI Datagrid性能优化专题

jQuery EasyUI的Datagrid组件功能算是很强大了，不过性能确实不怎么乐观，而对于性能问题，网络上几乎也找不到相关的优化资料，所谓的牛人们可能 都望而却步了。本博客以后会带着分析Datagrid组件的性能问题，并且给出优化方案，也希望大家能集

sunnylinner / 0评论 2014-12-19

IE6-IE9中tbody的innerHTML不能赋值bug

IE6-IE9中tbody的innerHTML不能赋值，重现代码如下。</html>两个按钮，第一个获取tbody的innerHTML，第二个设置tbody的innerHTML。获取时所有浏览器都弹出了tr的字符串，但设置时IE6-9不支持，而

yaoliuwei / 0评论 2014-09-25

innerHTML插入<style>元素

通过innerHTML写入<style>元素没有得到浏览器很好的支持，IE9、Opear 9、Chrome高版本和Firefox高版本支持以直观的方式通过innerHTML插入<style>元素，例如：。div.innerHTML

zhangpeng / 0评论 2014-09-05

innerHTML、innerText和outerHTML、outerText的区别

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

来老师 / 0评论 2014-08-10

innerHtml和innerText

innerHTML属性设置或返回表格行的开始和结束标签之间的HTML。**innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，

zhangpeng / 0评论 2014-05-04

innerHTMl和确认提示的使用

今天开发中涉及到对一个层的信息控制，就是控制一个层中显示什么信息，查找资料才知道使用innerHTML属性来控制层的值，这个innerHTML跟表单里面的value属性有点类似，能够控制层的显示值。比如说我一个div层里本来没有值，我处罚一个事件后要显示值

XaverSun / 0评论 2013-11-15

高效http页面优化法则【JS对DOM的操作】

很多人都认为JS的效率太慢了，都不愿意用js来实现相对困难一点的程序逻辑。在这里我要说的是其实js的效率并不慢，慢的是DOM，如果操作好DOM，你的js效率将提高接近千倍。

careyourself / 0评论 2013-11-15

Angular中innerHTML标签的样式不起作用的原因解析

contents = '<p>商品信息栏位<br><span style="color:red;">商品信息介绍</span></p>'; 但是上面的样式并不起作用，在Chor

maozhuofan / 0评论 2019-06-18

js中innerHTML、outHTML和innerText的用法与区别

也就是从对象的起始位置到终止位置的全部内容,包括Html标签。上例中的test.innerHTML的值也就是“<spanstyle="color:red">test1</span>test2”。上例中的test.

tianqi / 0评论 2013-07-23

前端性能优化：DocumentFragments或innerHTML取代复杂的元素注入

前端给力的地方是可以有 许多种简单的策略和代码习惯让我们可以保证最理想的前端性能。我们这个系列的主题就是要告诉你9种代码小技巧，只需要一分钟，就可以优化你现有的代码。尽管性能提升是在浏览器，DOM很慢，如果你没有注意到，你可能会察觉浏览器运行非常的慢。这就

zhaosnow / 0评论 2013-06-19

Dom节点操作的性能优化

批量增加Dom 尽量使用修改innerHTML的方式而不是用appendChild的方式; 因为使用innerHTML开销更小,速度更快,同时也更加内存安全.有 一点需要注意的是,用innerHTML方式添加时,一定不要在循环中使用 innerHTML +

秋老师Domino / 0评论 2013-06-14

document.getelementbyid("page").innerHTML火狐不兼容

实例1获取浏览器的名称和代码名。

KungLun / 0评论 2013-01-16

js中innerHTML用法

　　也就是从对象的起始位置到终止位置的全部内容,包括Html标签。　　上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2 ”。　　

jadechen00 / 0评论 2013-01-03

innerHTML、innerText、outerHTML、outerText区别。

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

wxcmdn / 0评论 2019-06-21

innerHTML和innerText

innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除

yesbuy00 / 0评论 2012-12-13

innerHTML用法

现在用top.innerHTML="..........";的方法就可以向这个id的位置写入HTML代码了。例如top.innerHTML="<input type="button" name=&qu

别告诉我有Bug / 0评论 2012-12-03

通过innerHTML动态插入的script无法执行的解决方法

很多时候，需要通过innerHTML动态插入javascript代码到指定的div中，或者通过ajax请求回来的内容里面包含javascript代码，然后把该代码插入指定的div中，但是插入后的script却无法执行。

zjnig的信息仓库 / 0评论 2012-11-05

js中innerHTML与innerText及outerHTML的用法与区别

也就是从对象的起始位置到终止位置的全部内容,包括Html标签。上例中的test.innerHTML的值也就是“<spanstyle="color:red">test1</span>test2”。上例中的text.

Burgdan / 0评论 2012-11-03

js与页面InnerHTML用法

varlen=selOper.length;selOper[i].checked=true;selOper[i].checked=false;vartbody=tab.tBodies.item(0);varrowsLen=tbody.rows.length

hhhkhhh / 0评论 2012-10-29

innerHTML vs createElement

WilsonLiu's blog 首发地址两者生成dom的方式有什么优劣呢？首先让我们看一个小问题再引入正题～。如何重复插入一个相同的html结构呢？重排与重绘上述方法，虽然能够成功生成相同的dom元素，但是性能上是存在问题的。每次插入dom元素到body

JackXue程序生涯 / 0评论 2019-06-20

(转)innerHTML和createElement效率比较

让我再次想起这个问题源于前面的一次面试，记得当时问我的一个问题是“创建节点选用哪种方式比较好”，我当时的回答是：IE下面innerHTML效率更高，而非IE浏览器下面则是createElement更好。可是，面试官觉得我的结论是不正确的，“在各种浏览器下面

owhile / 0评论 2012-08-31

js中innerHTML与innerText的用法与区别

也就是从对象的起始位置到终止位置的全部内容,包括Html标签。$.html();获取中间的所有内容。

wangnan0 / 0评论 2012-08-30

js对象的innerHTML属性

<td>Firstname</td><td>Lastname</td>[color=black][/color][/size][size=medium][size=medium][/size][align=l

owhile / 0评论 2012-08-17

解决 jQuery 实现父窗口的问题 如window.parent.document.getElementById().innerHTML

this.width=950:this.width=width;//设置最大窗口宽度

87281248 / 0评论 2012-07-05

解决innerHTML包含的js代码不能被执行的问题

今天我写了个js弹出模态对话框，这个模态对话框能直接显示一个html或者是url的文本内容，因为加入我需要在对话框里面显示比较复杂的布局的话直接用字符串来做是很麻烦且很难修改的。在我的要加载的页面里面有和用户的交互过程，这是用js实现的，我把这个页面加载到

codingker / 0评论 2012-06-26

js也是易学难精

vararrObj=newArray();varcount=elements.length;continue;obj.style.width=elements[i].style.width;obj.classname="word_warpbrea

水荷 / 0评论 2012-06-14

各浏览器中innerHTML实现差异（2）

和第一篇一样，如果创建的是行内元素，IE6/7/8中则不报错。或者将2,3的顺序对调IE6/7/8也不报错。这个问题是TX的蔡发现的。

happyzhangyin / 0评论 2012-05-17

各浏览器中innerHTML实现差异（1）

</script>获取页面中id为tit的元素，为其innerHTML赋值。IE6/7/8中抛异常，其它浏览器正常。但规范指出，段落P是不能包含P自身及其它块级元素的。IE6/7/8的处理洽洽是对的，其它浏览器则不对。把innerHTML的值换

jadechen00 / 0评论 2012-05-16

在table中使用innerHTML IE下报错unkown runtime error

if//找出td标记中class=setblank的那个标记

别告诉我有Bug / 0评论 2012-05-15

innerHTML、innerText、outerHTML的区别

innerHTML：也就是从对象的起始位置到终止位置的全部内容,包括Html标签。

yesbuy00 / 0评论 2012-03-04

Faster InnerHTML

Igot performance boost in my FF rather than IE, quite weird, anyway, I think it's useful.

htmlgood / 0评论 2011-11-23

在Firefox下可以正常使用,但在IE下就会有未知运行时错误

特别注意的是<tbody>,<table>,<tr>标签里面加正确格式的<td>标签都有可能出错，所以应该避免使用这些标签作为容器。

zhangpeng / 0评论 2011-10-14

js中innerHTML与innerText的用法与区别

也就是从对象的起始位置到终止位置的全部内容,包括Html标签。上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2 ”。上例中的te

niehanmin / 0评论 2011-10-05

在IE浏览器里，使用tr的innerHTML不管用的解决方案（原创）

点击按钮，调用js，添加一行，行里多个td，td里有select、textfield等。我使用tr的innerHTML来复制一行。oTR.innerHTML=oTRTemp.innerHTML;想要把第一行的tr里的所有内容，包括td，td里有select

帅的相对论 / 0评论 2011-09-26

关于innerHTML 赋值问题

最近发现各大类库都能利用div.innerHTML=HTML片断来生成节点元素，再把它们插入到目标元素的各个位置上。这东西实际上就是insertAdjacentHTML，但是IE可恶的innerHTML把这优势变成劣势。首先innerHTML会把里面的某些

zwq / 0评论 2011-08-19

关于innerHTML 赋值问题

JavaScript代码innerHTML='<option>1</option>'的时候测试出来的结果却是"1</option>"，ie6 7 8 都存在这个问题。经过测试，发现 在用innerHT

努力的zhiyi / 0评论 2011-08-19

innerText innerHtml textContent兼容问题(

-- 正文开始 -->IE支持innerHTML与innerText. 所以在IE与FireFox中使用显示内容时，必须得先判断浏览器，然后决定使用innerText还是textContent。

hong / 0评论 2011-08-17

innerHTML与innerText区别

也就是从对象的起始位置到终止位置的全部内容,包括Html标签。上例中的test.innerHTML的值也就是“<spanstyle="color:red">test1</span>test2”。上例中的text.

帅的相对论 / 0评论 2011-08-12