innerHTML、outerHTML、innerText、outerText的区别及兼容性问题

<h1>
    <span class="link_title"><a href="/html5_/article/details/23619103">
    innerHTML、outerHTML、innerText、outerText的区别及兼容性问题        
       
    </a>
    </span>

     
</h1>

    <div class="article_manage clearfix">
    <div class="article_r">
        <span class="link_postdate">2014-04-13 23:09</span>
        <span class="link_view" title="阅读次数">3628人阅读</span>
        <span class="link_comments" title="评论次数"> <a href="#comments" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_pinglun'])">评论</a>(0)</span>
        <span class="link_collect tracking-ad" data-mod="popu_171"> <a href="javascript:void(0);" onclick="javascript:collectArticle('innerHTML%e3%80%81outerHTML%e3%80%81innerText%e3%80%81outerText%e7%9a%84%e5%8c%ba%e5%88%ab%e5%8f%8a%e5%85%bc%e5%ae%b9%e6%80%a7%e9%97%ae%e9%a2%98','23619103');return false;" title="收藏" target="_blank">收藏</a></span>
         <span class="link_report"> <a href="#report" onclick="javascript:report(23619103,2);return false;" title="举报">举报</a></span>

    </div>
</div>    <style type="text/css">        
        .embody{
            padding:10px 10px 10px;
            margin:0 -20px;
            border-bottom:solid 1px #ededed;                
        }
        .embody_b{
            margin:0 ;
            padding:10px 0;
        }
        .embody .embody_t,.embody .embody_c{
            display: inline-block;
            margin-right:10px;
        }
        .embody_t{
            font-size: 12px;
            color:#999;
        }
        .embody_c{
            font-size: 12px;
        }
        .embody_c img,.embody_c em{
            display: inline-block;
            vertical-align: middle;               
        }
         .embody_c img{               
            30px;
            height:30px;
        }
        .embody_c em{
            margin: 0 20px 0 10px;
            color:#333;
            font-style: normal;
        }
</style>
<script type="text/javascript">
    $(function () {
        try
        {
            var lib = eval("("+$("#lib").attr("value")+")");
            var html = "";
            if (lib.err == 0) {
                $.each(lib.data, function (i) {
                    var obj = lib.data[i];
                    //html += '<img src="' + obj.logo + '"/>' + obj.name + "&nbsp;&nbsp;";
                    html += ' <a href="' + obj.url + '" target="_blank">';
                    html += ' <img src="' + obj.logo + '">';
                    html += ' <em><b>' + obj.name + '</b></em>';
                    html += ' </a>';
                });
                if (html != "") {
                    setTimeout(function () {
                        $("#lib").html(html);                      
                        $("#embody").show();
                    }, 100);
                }
            }      
        } catch (err)
        { }
        
    });
</script>
  <div class="category clearfix">
    <div class="category_l">
       <img src="http://static.blog.csdn.net/images/category_icon.jpg">
        <span>分类：</span>
    </div>
    <div class="category_r">
                <label onclick="GetCategoryArticles('1911301','huangyibin628','top','23619103');">
                    <span onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_fenlei']);">HTMl5<em>（80）</em></span>
                  <img class="arrow-down" src="http://static.blog.csdn.net/images/arrow_triangle _down.jpg" style="display:inline;">
                  <img class="arrow-up" src="http://static.blog.csdn.net/images/arrow_triangle_up.jpg" style="display:none;">
                    <div class="subItem" style="background-color: rgb(204, 232, 207);">
                        <div class="subItem_t"><a href="http://blog.csdn.net/huangyibin628/article/category/1911301" target="_blank">作者同类文章</a><i class="J_close">X</i></div>
                        <ul class="subItem_l" id="top_1911301">                            
                        </ul>
                    </div>
                </label>                    
                <label onclick="GetCategoryArticles('2190687','huangyibin628','top','23619103');">
                    <span onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_fenlei']);">JavaScript<em>（22）</em></span>
                  <img class="arrow-down" src="http://static.blog.csdn.net/images/arrow_triangle _down.jpg" style="display:inline;">
                  <img class="arrow-up" src="http://static.blog.csdn.net/images/arrow_triangle_up.jpg" style="display:none;">
                    <div class="subItem" style="background-color: rgb(204, 232, 207);">
                        <div class="subItem_t"><a href="http://blog.csdn.net/huangyibin628/article/category/2190687" target="_blank">作者同类文章</a><i class="J_close">X</i></div>
                        <ul class="subItem_l" id="top_2190687">                            
                        </ul>
                    </div>
                </label>                    
    </div>
</div>
    <div class="bog_copyright">         
        <p class="copyright_p">版权声明：本文为博主原创文章，未经博主允许不得转载。</p>
    </div>

今天看了很多文章关于innerHTML、outerHTML、innerText、outerText的区别，都是很模糊的一个介绍，所以自己总结下这些区别以及一些重点内容。很多文章在描述这些区别的时候，都是只针对一点进行描述，所以很难完全理解这些的字面含义以及区别点。

一、区别描述如下：（书上形式的说法）

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

单单看这些文字很难弄懂什么标签啊获取啊，所以需要代码来实践证明，比较通俗易懂。

注意看描述：一个是设置，一个是获取。所谓设置就是我有一个标签，里面有文本内容或是没文本内容，我要去实现“替换”内容出现的所谓区别；所谓获取，就是同样一个个标签，里面有文本内容或是没文本内容我怎么去获取到它的内容出现的差异区别，所以在做代码实践时，要注意从这两个方面下手去做区别才能很好的全面了解差异性。

二、从”获取“对象内容上区别

[html] view plain copy

print?

<!DOCTYPE html>
<html>
<head>
<meta charset= 'utf-8'>
<title>HTML5自由者</title>
</head>
<body>
<div id="test1">这是div中的文字<span>这是span中的文字</span></div>
<script type="text/javascript">
console.log('innerHTML:'+test1.innerHTML);
console.log('outerHTML:'+test1.outerHTML);
console.log('innerText:'+test1.innerText);
console.log('outerText:'+test1.outerText);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset= 'utf-8'>
	<title>HTML5自由者</title>
</head>
<body>
	<div id="test1">这是div中的文字<span>这是span中的文字</span></div>
&lt;script type="text/javascript"&gt;
 	console.log('innerHTML:'+test1.innerHTML);
 	console.log('outerHTML:'+test1.outerHTML);
 	console.log('innerText:'+test1.innerText);
 	console.log('outerText:'+test1.outerText);
&lt;/script&gt;

</body>

</html>

我们先来看下console控制台显示的运行结果：

innerHTML:这是div中的文字<span>这是span中的文字</span>

outerHTML:<div id="test1">这是div中的文字<span>这是span中的文字</span></div>

innerText:这是div中的文字这是span中的文字

outerText:这是div中的文字这是span中的文字

可以得出结论：

① innerHTML 获取对象起始和结束标签内的 HTML，即这里的对象是div标签，亦即这个标签里面所有的内容包含span标签也获取出来，即 “这是div中的文字<span>这是span中的文字</span>”（注意HTMl这个字的意思，也就是结构）

② outerHTML 是在①innerHTML基础上获取它的outer对象标签内容，也就是“<div id="test1">这是div中的文字<span>这是span中的文字</span></div>” 这些里面有什么内容及标签结构都获取出来。（注意HTMl这个字的意思，也就是结构）

② innerText和outerText在获取时是相同效果都是获取<div> </div>标签里的文本内容，去除掉了<div> ,<span>标签，只显示div,span标签里的文本内容，即 “这是div中的文字这是span中的文字”（注意Text这个字的意思，也就是文本）

我先来看一张结构图，方便记忆下：

三、从”设置“对象内容上区别

先看代码：

[html] view plain copy

print?

<!DOCTYPE html>
<html>
<head>
<meta charset= 'utf-8'>
<title>HTML5自由者——innerHTML、outerHTML和innerText、outerHTML的区别</title>
<script language="JavaScript" type="text/javascript">
　　//.innerHTML
　　function innerHTMLDemo()
　　{
　　　test_id1.innerHTML="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>";
　　}
　　//.innerText
　　function innerTextDemo()
　　{
　　　test_id2.innerText="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>";
　　}
　　//.outerHTML
　　function outerHTMLDemo()
　　{
　　　test_id3.outerHTML="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>";
　　}
　　//.outerText
　　function outerTextDemo()
　　{
　　　test_id4.outerText="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>";
　　}
　</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>

<!DOCTYPE html>
<html>
<head>
 <meta charset= 'utf-8'>
 <title>HTML5自由者——innerHTML、outerHTML和innerText、outerHTML的区别</title>
 <script language="JavaScript" type="text/javascript"> 
　　//.innerHTML
　　function innerHTMLDemo()
　　{ 
　　　test_id1.innerHTML="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>"; 
　　} 
　　//.innerText
　　function innerTextDemo()
　　{ 
　　　test_id2.innerText="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>"; 
　　} 
　　//.outerHTML
　　function outerHTMLDemo()
　　{ 
　　　test_id3.outerHTML="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>"; 
　　}
　　//.outerText
　　function outerTextDemo()
　　{ 
　　　test_id4.outerText="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>"; 
　　}
　</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>

运行结果：鼠标点击li列表显示不同的样式，我们来一起一个一个点击看看会发生什么现在，

①innerHTML点击后显示结果：

可以看出，在设置标签的时候，innerHTML直接把标签结构设置到HTML文档中，显示出样式出来，

[html] view plain copy

print?

<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>

<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>

再来看看通过谷歌浏览器调试工具我们来看看【innerHTML】结构是怎样的？

也就是说，innerHTMl在设置对象文本内容的时候，有插入标签，是直接把字体大小，颜色斜体下划线这些样式显现出来。

② outerHTML点击后显示结果：（跟innerHTMl效果一样。）是直接把字体大小，颜色斜体下划线这些样式显现出来。

③ innerText 跟outerText 显示结果是直接把" "里的内容包括标签原封不动的设置显示出来（如下图）

总结： inner操作的是tag内部的对象, outer 不仅操作内部对象也包含了本身对象.读这些属性值的过程中,可能没有区别,但是赋值操作区别可就大了.

四、兼容性区别

注意: W3C 只支持innerHTML. 其他都是微软的规定.(outerHTML,outerText,innerText只有微软的IE 好使, 其他浏览器不好用(firefox, mozilla等),必须用其他方法实现)

innerHTML & outerHTML：获取/设置的内容是包含标签的

两者已经被HTML5纳入规范。

innerText & outerText：获取/设置的内容是文本内容

innerHTML在获取的时候：

IE和Opera会将获取到的标签全部转换为大写形式。而苹果、谷歌、火狐会将内容按照原来的格式返回HTML，包括空格和缩进。（这也就意味着返回后的不同内容的DOM树结构截然不同）

outerHTML：新建的DOM子树会替代掉“调用元素”

IE4+、Safari4+、Chrome、Opera8+支持，FF7-不支持

脚本限制：

使用innerHTML插入<script>的时候，不会执行相应代码，但是在IE8以及之前版本浏览器中，能够执行，但需要满足一些执行条件：

1、必须指定defer属性；

2、必须位于有作用域的元素之后（如一个div、一个文本节点等）

使用innerHTML插入<style>的时候，正常浏览器能够执行样式，但是IE8以及之前浏览器中，不能够执行，因为IE8认为<style>是没有作用域的元素。

如下元素不支持innerHTML：<col><colgroup><frameset><head><html><style><table><tbody><thead><tfoot><tr>

在IE8以及之前的浏览器中，<title>也不支持innerHTML

innerText：IE4+、Safari3+、Chrome、Opera8+支持；FF不支持，但是有textContent属性（DOM Level3规定的属性，支持程度：IE9+、Safari3+、Chrome、Opera10+）

outerText：获取和innerHTML无区别，但是设置有区别（不只替换调用元素的子节点，还会替换整个元素）

支持程度：IE4+、Safari3+、Chrome、Opera8+

    <div id="digg" articleid="23619103">
        <dl id="btnDigg" class="digg digg_disable" onclick="btndigga();">
           
             <dt>顶</dt>
            <dd>0</dd>
        </dl>
       
          
        <dl id="btnBury" class="digg digg_disable" onclick="btnburya();">
          
              <dt>踩</dt>
            <dd>0</dd>               
        </dl>
        
    </div>
 <div class="tracking-ad" data-mod="popu_222"><a href="javascript:void(0);" target="_blank">&nbsp;</a>   </div>
<div class="tracking-ad" data-mod="popu_223"> <a href="javascript:void(0);" target="_blank">&nbsp;</a></div>
<script type="text/javascript">
    function btndigga() {
        $(".tracking-ad[data-mod='popu_222'] a").click();
    }
    function btnburya() {
        $(".tracking-ad[data-mod='popu_223'] a").click();
    }
        </script>

<div style="clear:both; height:10px;"></div>


        <div class="similar_article">
                <h4></h4>
                <div class="similar_c" style="margin:20px 0px 0px 0px">
                    <div class="similar_c_t">
                      &nbsp;&nbsp;相关文章推荐
                    </div>
               
                    <div class="similar_wrap tracking-ad" data-mod="popu_36" style="max-height: 250px; background-color: rgb(204, 232, 207);">                       
                        <ul class="similar_list fl">    
                               <li>
                                   <em>•</em>
                                   <a href="http://blog.csdn.net/liwusen/article/details/50739764" title="在javascript中innerHTML和innerText的区别，以及innerHTML和innerText在各个版本浏览器的兼容性问题" strategy="BlogCommendFromBaidu_0" target="_blank">在javascript中innerHTML和innerText的区别，以及innerHTML和innerText在各个版本浏览器的兼容性问题</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://edu.csdn.net/course/detail/1203?utm_source=blog7" title="Hadoop生态系统零基础入门" strategy="undefined" target="_blank">Hadoop生态系统零基础入门</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://blog.csdn.net/bfboys/article/details/54318783" title="innerHTML、outerHTML、innerText、outerText的区别及兼容性问题" strategy="BlogCommendFromCsdn_1" target="_blank">innerHTML、outerHTML、innerText、outerText的区别及兼容性问题</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://edu.csdn.net/huiyiCourse/series_detail/62?utm_source=blog7" title="系统集成工程师必过冲刺！" strategy="undefined" target="_blank">系统集成工程师必过冲刺！</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://download.csdn.net/download/u010627547/5347485" title="innerHTML、outerHTML、innerText、outerText的用法与区别" strategy="BlogCommendFromCsdn_2" target="_blank">innerHTML、outerHTML、innerText、outerText的用法与区别</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://edu.csdn.net/course/detail/2883?utm_source=blog7" title="征服React Native我有妙招" strategy="undefined" target="_blank">征服React Native我有妙招</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://blog.csdn.net/li2274221/article/details/25193381" title="页面优化" strategy="BlogCommendFromCsdn_3" target="_blank">页面优化</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://edu.csdn.net/course/detail/2314?utm_source=blog7" title="FFmpeg音视频高级开发实战" strategy="undefined" target="_blank">FFmpeg音视频高级开发实战</a>
                               </li>
                        </ul>
                          <ul class="similar_list fr">      
                               <li>
                                   <em>•</em>
                                   <a href="http://download.csdn.net/download/gayayzy/3897618" title="innerHTML-outerHTML-innerTEXT.txt" strategy="BlogCommendFromCsdn_4" target="_blank">innerHTML-outerHTML-innerTEXT.txt</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://edu.csdn.net/course/detail/5463?utm_source=blog7" title="5天搞定深度学习框架-Caffe" strategy="undefined" target="_blank">5天搞定深度学习框架-Caffe</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://blog.csdn.net/jumtre/article/details/47323379" title="Web页面优化" strategy="BlogCommendFromCsdn_5" target="_blank">Web页面优化</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://edu.csdn.net/course/detail/4661?utm_source=blog7" title="Python数据分析经典案例解析" strategy="undefined" target="_blank">Python数据分析经典案例解析</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://download.csdn.net/download/lixincsr/3649596" title="JS的兼容性问题" strategy="BlogCommendFromCsdn_6" target="_blank">JS的兼容性问题</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://blog.csdn.net/yuxiaoxia28/article/details/48859037" title="前端面试题（1）" strategy="BlogCommendFromCsdn_7" target="_blank">前端面试题（1）</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://download.csdn.net/download/chenwl56202/9409914" title="IE6-IE11兼容性问题列表及解决办法" strategy="BlogCommendFromCsdn_8" target="_blank">IE6-IE11兼容性问题列表及解决办法</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://blog.csdn.net/github_38861674/article/details/77449032" title="复习DOM相关操作" strategy="BlogCommendFromCsdn_9" target="_blank">复习DOM相关操作</a>
                               </li>
                        </ul>
                    </div>
                </div>
            </div>

相关阅读:
PHP新建文件并写入内容demo
PHP输出结果demo
网站顶部图标使用分析
 .htaccess文件的创建 / 联动天下空间伪静态(isapi_rewrite)配置方法
 【原创】网站底部竖线布局对比/研究
 JS判断访问设备终端PC/iPad/iPhone/android 和浏览器IE/Opera/Firefox/webKit
我的blog风格
 2020.11.17 近日复健情况
 南风又起，锦字题予往昔（写给校刊《我们大多数》）
【对拍大法好！！】
原文地址：https://www.cnblogs.com/jpfss/p/7489585.html