innerHTML、outerHTML、innerText、outerText的區別及兼容性問題

時間 2019-11-10

標籤 innerhtml outerhtml innertext outertext 區別兼容性問題欄目 HTML 简体版

原文原文鏈接

innerHTML、outerHTML、innerText、outerText的區別及兼容性問題

2014-04-13 23:09 3628人閱讀評論(0) 收藏舉報

分類：

HTMl5（80）

做者同類文章 X

JavaScript（22）

做者同類文章 X

今天看了不少文章關於innerHTML、outerHTML、innerText、outerText的區別，都是很模糊的一個介紹，因此本身總結下這些區別以及一些重點內容。不少文章在描述這些區別的時候，都是隻針對一點進行描述，因此很難徹底理解這些的字面含義以及區別點。css

1、區別描述以下：（書上形式的說法）html

innerHTML設置或獲取位於對象起始和結束標籤內的 HTML
outerHTML設置或獲取對象及其內容的 HTML 形式
innerText 設置或獲取位於對象起始和結束標籤內的文本
outerText 設置(包括標籤)或獲取(不包括標籤)對象的文本

單單看這些文字很難弄懂什麼標籤啊獲取啊，因此須要代碼來實踐證實，比較通俗易懂。

注意看描述：一個是設置，一個是獲取。所謂設置就是我有一個標籤，裏面有文本內容或是沒文本內容，我要去實現「替換」內容出現的所謂區別；所謂獲取，就是一樣一個個標籤，裏面有文本內容或是沒文本內容我怎麼去獲取到它的內容出現的差別區別，因此在作代碼實踐時，要注意從這兩個方面下手去作區別才能很好的全面瞭解差別性。

2、從」獲取「對象內容上區別

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

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

咱們先來看下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這個字的意思，也就是文本）

我先來看一張結構圖，方便記憶下：

3、從」設置「對象內容上區別

先看代碼：

[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效果同樣。）是直接把字體大小，顏色斜體下劃線這些樣式顯現出來。
html5

③ innerText 跟outerText 顯示結果是直接把" "裏的內容包括標籤原封不動的設置顯示出來（以下圖）java

總結： inner操做的是tag內部的對象, outer 不只操做內部對象也包含了自己對象.讀這些屬性值的過程當中,可能沒有區別,可是賦值操做區別可就大了.git

4、兼容性區別github

注意: 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以及以前版本瀏覽器中，可以執行，但須要知足一些執行條件：

一、必須指定defer屬性；

二、必須位於有做用域的元素以後（如一個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+

頂: 0

踩: 0

相關文章推薦

相關標籤/搜索

innerhtml&outerhtml&innertext&outertext

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。