JavaScript の innerHTML、outerHTML、innerText、outerText_javascript スキルの違い-jsチュートリアル-php.cn

JavaScript の innerHTML、outerHTML、innerText、outerText_javascript スキルの違い

WBOY

リリース： 2016-05-16 18:58:10

オリジナル

1022 人が閲覧しました

1. 機能説明:
innerHTML は、オブジェクト
の開始タグと終了タグ内にある HTML を設定または取得します。 externalHTML オブジェクトとそのコンテンツの HTML 形式を設定または取得します
innerText は、オブジェクト
の開始タグと終了タグ内にあるテキストを設定または取得します。 externalText オブジェクト
のテキストを設定 (ラベルを含む) または取得 (ラベルを除く) します。 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>设置或获取位于对象起始和结束标签内的 HTML.</u></i>"; 
} 
//.innerText 
function innerTextDemo() 
{ 
test_id2.innerText="<i><u>设置或获取位于对象起始和结束标签内的文本.</u></i>"; 
} 
//.outerHTML 
function outerHTMLDemo() 
{ 
test_id3.outerHTML="<i><u>设置或获取对象及其内容的 HTML 形式.</u></i>"; 
} 
//.outerText 
function outerTextDemo() 
{ 
test_id4.outerText="<i><u>设置(包括标签)或获取(不包括标签)对象的文本.</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 と externalHTML、innerText とouterText の違いは次のとおりです。
1) innerHTML と externalHTML に含まれる HTML は、オブジェクトのコンテンツを設定するときに解析されますが、innerText と externalText は解析されません。
2) 設定する場合、innerHTML、innerTextはタグ内のテキストのみを設定しますが、outerHTML、outerTextはタグを含めたテキストを設定します。

特別な指示:
innerHTML は W3C 標準に準拠した属性であり、innerText は IE ブラウザにのみ適用できるため、HTML タグを含まないコンテンツを出力する場合は、innerHTML をできるだけ使用せずに取得することができます。最後に、正規表現を使用して HTML タグを削除します。次に、W3C 標準に準拠する簡単な例を示します。

<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+&#63;>/gim,''))">无HTML,符合W3C标准</a>

ログイン後にコピー