innerHTML、outerHTML、innerText、outerText的區別

【如果覺得文章寫的好的話希望能按一下讚或分享喔】

 image

之前一直搞不太清楚這四個項目的差異

今天有看到 別人 用以下程式碼來解釋其差異,覺得很好理解,故分享之

這個頁面 也有直接的範例可以看

<div id="div"><input name="button" value="Button" type="button"><font color="green"><h2>This is a DIV!</h2></font></div>

<input name="innerHTML" value="innerHTML" type="button" OnClick="alert(div.innerHTML);">
<input name="outerHTML" value="outerHTML" type="button" OnClick="alert(div.outerHTML);">
<input name="innerText" value="innerText" type="button" OnClick="alert(div.innerText);">
<input name="outerText" value="outerText" type="button" OnClick="alert(div.outerText);">

 

一、innerHTML

其中 innerHTML 只會顯示被 <div> </div> 夾住的內容

image

 

二、outerHTML

而 outerHTML 則會連 <div> </div> 也顯示出來

image

 

三、innerText

innerText 則是單純會抓到非 tag 的內容image 

 

四、outerText

outerText 雖然 alert 顯示的內容與 innerText 一樣,但是,如果使用像是 document.getElementById(div’).outerText = “test” 的話,則會抓到被 <div> </div> 包住的所有內容 (tag與 text),而不像 innerText 只有單純抓到 text

image 

 

 

五、補充說明

注意: W3C 只支持innerHTML.,其他的 outerHTML,outerText,innerText 較適用於 IE browser

Related Posts Plugin for WordPress, Blogger...
【如果覺得文章寫的好的話希望能按一下讚或分享喔】

彭其捷

想要做出很棒的產品,所以我寫程式,也研究介面 (UI) 與使用者經驗 (UX),並思考管理的法則。

【Profile】http://about.me/divaka

twitter facebookgooglepluslinkedinbloggertumblrflickryoutubedribbblerssemail


Fatal error: Uncaught Exception: 12: REST API is deprecated for versions v2.1 and higher (12) thrown in /home/content/63/7692663/html/blog/wp-content/plugins/seo-facebook-comments/facebook/base_facebook.php on line 1273