ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript における innerHTML、innerText、outerHTML の違い

JavaScript における innerHTML、innerText、outerHTML の違い

yulia
リリース: 2018-09-14 17:25:36
オリジナル
1695 人が閲覧しました

最近、JavaScript の知識をまとめてみんなと共有しました。この記事は主に JavaScript における innerHTML、innerText、outerHTML の使用法の違いについて説明しています。必要な方は参考にしていただければ幸いです。

使用法:

<div id="test">
   <span style="color:red">test1</span> test2
</div>
ログイン後にコピー

は JS で使用できます:

test.innerHTML:

つまり、最初からオブジェクト HTML タグを含む、位置から終了位置までのすべてのコンテンツ。

上記の例の test.innerHTML の値は、「test1 test2」です。

test.innerText:

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

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

test.outerHTML:

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

上記の例の text.outerHTML の値は
test1 test2

完全な例:

<div id="test">
   <span style="color:red">test1</span> test2
</div>
innerHTML内容
inerHTML内容
outerHTML内容
ログイン後にコピー

特記事項:

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

HTML なし、W3C 標準に準拠

以上がJavaScript における innerHTML、innerText、outerHTML の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート