JavaScript_javascript スキルにおける innerHTML、innerText、outerHTML の使用法と違い

これ以上ナンセンスではありません。以下の例をご覧ください。

使用法:

<div id="test"> 
 <span style="color:red">test1</span> test2 
</div>

JS で使用できます:

test.innerHTML:

つまり、Html タグを含む、オブジェクトの開始位置から終了位置までのコンテンツ全体です。

上の例の test.innerHTML の値は “0bbd5cc33b622ada7b9ba1b438e60276test154bdf357c58b8a65c66d7c19c8e4d114 ”です。

test.innerText:

開始位置から終了位置までのコンテンツですが、HTML タグ

が削除されます

上記の例の text.innerTest の値は、span タグが削除された「test1 test2」です。

test.outerHTML:

innerHTML のコンテンツ全体に加えて、object タグ自体も含まれます。

上記の例の text.outerHTML の値も

<div id="test"><span style="color:red">test1</span> test2</div>

完全な例:

<div id="test"> 
 <span style="color:red">test1</span> test2 
</div>
innerHTML内容
inerHTML内容
outerHTML内容

特別な指示:

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

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

innerHTML と innerText を区別するにはどうすればよいですか?

サンプルコード:

<div id="test"> 
<span style="color:red">test1</span> test2 
</div> 
<a 
href="javascript:alert(test.innerHTML)">innerHTML内容</a> 
<a 
href="javascript:alert(test.innerText)">inerHTML内容</a> 

共通点:

innerHTML と innerText は要素内のコンテンツを置き換えます。

相違点:

1、innerHTML:

つまり、Html タグを含む、オブジェクトの開始位置から終了位置までのコンテンツ全体です。

上の例の test.innerHTML の値は "0bbd5cc33b622ada7b9ba1b438e60276test154bdf357c58b8a65c66d7c19c8e4d114

test2”.

2、innerText:

開始位置から終了位置までのコンテンツですが、HTML タグ

が削除されます。

上記の例の text.innerTest の値は、span タグが削除された「test1 test2」です。

innerHTML は W3C 標準に準拠する属性ですが、innerText は IE ブラウザにのみ適用できるため、HTML タグなしでコンテンツを出力する場合は、innerHTML をできるだけ使用し、innerText を使用しないようにしてください。 innerHTML を使用して HTML タグを含むコンテンツを取得した後、正規表現を使用して HTML タグを削除します。

上記は、JavaScript における innerHTML、innerText、outerHTML の使用法と違いについての紹介です。気に入っていただければ幸いです。