欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript innerHTML、outerHTML、innerText、outerText的區(qū)別

 更新時間：2008年11月24日 20:50:05   投稿：mdxy-dxy  
這篇文章主要介紹了javascript innerHTML、outerHTML、innerText、outerText的區(qū)別,本文講解了它們的功能、使用實例、和不同之處,需要的朋友可以參考下

1、功能講解:
innerHTML 設(shè)置或獲取位于對象起始和結(jié)束標簽內(nèi)的 HTML
outerHTML 設(shè)置或獲取對象及其內(nèi)容的 HTML 形式
innerText 設(shè)置或獲取位于對象起始和結(jié)束標簽內(nèi)的文本
outerText 設(shè)置(包括標簽)或獲取(不包括標簽)對象的文本
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é)束標簽內(nèi)的 HTML.</u></i>"; 
} 
//.innerText 
function innerTextDemo() 
{ 
test_id2.innerText="<i><u>設(shè)置或獲取位于對象起始和結(jié)束標簽內(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è)置(包括標簽)或獲取(不包括標簽)對象的文本.</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è)置標簽內(nèi)的文本，而outerHTML與outerText設(shè)置包括標簽在內(nèi)的文本。

特別說明：
　　innerHTML是符合W3C標準的屬性，而innerText只適用于IE瀏覽器，因此，盡可能地去使用innerHTML，而少用innerText，如果要輸出不含HTML標簽的內(nèi)容，可以使用innerHTML取得包含HTML標簽的內(nèi)容后，再用正則表達式去除HTML標簽，下面是一個簡單的符合W3C標準的示例： 

<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">無HTML,符合W3C標準</a>

相關(guān)文章

  • 你可能不知道的typescript實用小技巧

    你可能不知道的typescript實用小技巧

    作為前端程序員,TS已經(jīng)成為一項必不可少的技能,本文旨在介紹 TS中的一些實用技巧,提高大家對這門語言更深的認知,這篇文章主要給大家介紹了關(guān)于typescript實用小技巧的相關(guān)資料,需要的朋友可以參考下
    2021-08-08
  • JavaScript 處理樹數(shù)據(jù)結(jié)構(gòu)的方法示例

    JavaScript 處理樹數(shù)據(jù)結(jié)構(gòu)的方法示例

    這篇文章主要介紹了JavaScript 處理樹數(shù)據(jù)結(jié)構(gòu)的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2019-06-06
  • JavaScript打開word文檔的實現(xiàn)代碼(c#)

    JavaScript打開word文檔的實現(xiàn)代碼(c#)

    在C#中打開word文檔其實不算太難，方法也比較多,用javascript怎么打開呢？其實，也不難
    2012-04-04
  • js document.getElementsByClassName的使用介紹與自定義函數(shù)

    js document.getElementsByClassName的使用介紹與自定義函數(shù)

    今天在增加一個功能的時候需要用到getElementsByClassName()，getElementsByClassName但是HTML5 新增的DOM API。IE8以下不支持，那么就需要下面的方法解決了
    2016-11-11
  • Javascript 作用域使用說明

    Javascript 作用域使用說明

    在傳統(tǒng)的面向?qū)ο蟪绦蛟O(shè)計中，主要關(guān)注于公用和私有作用域。公用作用域中的對象屬性可以從對象外部訪問，即開發(fā)者創(chuàng)建對象的實例后，就可使用它的公用屬性。
    2009-08-08
  • JavaScript判斷瀏覽器運行環(huán)境的詳細方法

    JavaScript判斷瀏覽器運行環(huán)境的詳細方法

    這篇文章主要給大家介紹了關(guān)于JavaScript判斷瀏覽器運行環(huán)境的詳細方法，文中通過示例代碼介紹的非常詳細，對大家學習或者使用JavaScript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
    2019-06-06
  • JS基于VUE組件實現(xiàn)城市列表效果

    JS基于VUE組件實現(xiàn)城市列表效果

    這篇文章主要為大家詳細介紹了JS基于VUE組件實現(xiàn)城市列表效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-08-08
  • 關(guān)閉時刷新父窗口兩種方法

    關(guān)閉時刷新父窗口兩種方法

    這篇文章主要介紹了刷新父窗口兩種方法,需要的朋友可以參考下
    2014-05-05
  • JavaScript定時器和優(yōu)化的取消定時器方法

    JavaScript定時器和優(yōu)化的取消定時器方法

    這篇文章主要介紹了JavaScript定時器和優(yōu)化的取消定時器方法,本文著重講解一個優(yōu)化的取消定時器的方法,需要的朋友可以參考下
    2015-07-07
  • 打造通用的勻速運動框架(實例講解)

    打造通用的勻速運動框架(實例講解)

    下面小編就為大家?guī)硪黄蛟焱ㄓ玫膭蛩龠\動框架(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-10-10

最新評論