javascript innerHTML、outerHTML、innerText、outerText的區(qū)別
1、功能講解:
innerHTML 設(shè)置或獲取位于對象起始和結(jié)束標(biāo)簽內(nèi)的 HTML
outerHTML 設(shè)置或獲取對象及其內(nèi)容的 HTML 形式
innerText 設(shè)置或獲取位于對象起始和結(jié)束標(biāo)簽內(nèi)的文本
outerText 設(shè)置(包括標(biāo)簽)或獲取(不包括標(biāo)簽)對象的文本
2、示例
<html>
<head>
<title>Demo</title>
<style><!--
body {font-family:"宋體";color="blue";font-size="9pt"}
--> </style>
<script language="JavaScript">
//.innerHTML
function innerHTMLDemo()
{
test_id1.innerHTML="<i><u>設(shè)置或獲取位于對象起始和結(jié)束標(biāo)簽內(nèi)的 HTML.</u></i>";
}
//.innerText
function innerTextDemo()
{
test_id2.innerText="<i><u>設(shè)置或獲取位于對象起始和結(jié)束標(biāo)簽內(nèi)的文本.</u></i>";
}
//.outerHTML
function outerHTMLDemo()
{
test_id3.outerHTML="<i><u>設(shè)置或獲取對象及其內(nèi)容的 HTML 形式.</u></i>";
}
//.outerText
function outerTextDemo()
{
test_id4.outerText="<i><u>設(shè)置(包括標(biāo)簽)或獲取(不包括標(biāo)簽)對象的文本.</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在設(shè)置對象的內(nèi)容時包含的HTML會被解析，而innerText與outerText則不會。
2)、在設(shè)置時，innerHTML與innerText僅設(shè)置標(biāo)簽內(nèi)的文本，而outerHTML與outerText設(shè)置包括標(biāo)簽在內(nèi)的文本。
特別說明：
innerHTML是符合W3C標(biāo)準(zhǔn)的屬性，而innerText只適用于IE瀏覽器，因此，盡可能地去使用innerHTML，而少用innerText，如果要輸出不含HTML標(biāo)簽的內(nèi)容，可以使用innerHTML取得包含HTML標(biāo)簽的內(nèi)容后，再用正則表達(dá)式去除HTML標(biāo)簽，下面是一個簡單的符合W3C標(biāo)準(zhǔn)的示例：
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">無HTML,符合W3C標(biāo)準(zhǔn)</a>
- innerhtml用法 innertext用法 以及innerHTML與innertext的區(qū)別
- javascript innerText和innerHtml應(yīng)用
- innerText innerHTML的用法以及注意事項 [推薦]
- 詳談innerHTML innerText的使用和區(qū)別
- innerHTML,outerHTML,innerText,outerText的用法及區(qū)別解析
- innerText和innerHTML 一些問題分析
- JavaScript中innerHTML，innerText，outerHTML的用法及區(qū)別
- js中textContent、innerText和innerHTML的用法以及區(qū)別
- innerHTML，outerHTML,innerTEXT三者之間的區(qū)別
- 前端innerHTML和innerText到底有啥區(qū)別及避坑指南(新人別再搞混了!)
相關(guān)文章
深入講解xhr（XMLHttpRequest）/jsonp請求之a(chǎn)bort
這篇文章主要給大家深入的介紹了關(guān)于xhr（XMLHttpRequest）/jsonp請求之a(chǎn)bort的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-07-07
javascript實(shí)現(xiàn)倒計時跳轉(zhuǎn)頁面
本文給大家介紹了如何使用javascript實(shí)現(xiàn)倒計時跳轉(zhuǎn)到其他頁面的方法以及實(shí)現(xiàn)原理，非常的簡單實(shí)用，有需要的小伙伴可以參考下。2016-01-01
JavaScript 中 JSON.parse 函數(shù) 和 JSON.stringify 函數(shù)
這篇文章主要介紹了JavaScript -- JSON.parse 函數(shù) 和 JSON.stringify 函數(shù),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-12-12
js中幾種去掉字串左右空格的方法...2006-12-12
微信小程序地圖定位的實(shí)現(xiàn)方法實(shí)例
小程序功能的強(qiáng)大想必使用過的人都知道,下面這篇文章主要給大家介紹了關(guān)于微信小程序地圖定位的實(shí)現(xiàn)方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
這篇文章主要為大家詳細(xì)介紹了原生javascript和css實(shí)現(xiàn)圖片輪播效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
最近要在項目中使用Knockoutjs，因此今天就首先研究了一下Knockoutjs的環(huán)境搭建，并進(jìn)行了一個簡單的測試,需要的朋友可以了解下2012-11-11
這篇文章給大家分享了js數(shù)據(jù)類型檢測的相關(guān)實(shí)例內(nèi)容，有需要的朋友可以測試下。2018-08-08
這篇文章主要介紹了原生js+css調(diào)節(jié)音量滑塊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
TypeScript實(shí)現(xiàn)字符串轉(zhuǎn)樹結(jié)構(gòu)的方法詳解
有一個多行字符串，每行開頭會用空格來表示它的層級關(guān)系，每間隔一層它的空格總數(shù)為2，如何將它轉(zhuǎn)為json格式的樹型數(shù)據(jù)？本文就跟大家分享下這個算法2022-09-09