インナーHTML/アウターHTML;インナーテキスト/アウターテキスト; textContent_html/css_WEB-ITnose

innerHTML とexternalHTML

Element.innerHTML

参考: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

機能

その子孫を記述するシリアル化された HTML コードを取得.

設定: すべての子を削除し、コンテンツ文字列を解析して、結果のノードを要素の子として割り当てます。 

Element.outerHTML

参考: https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML

機能

要素とその子孫を記述するシリアル化された HTML フラグメントを取得します。

Set : フラグメント解析アルゴリズムのコンテキスト ノードとして、要素の親を持つコンテンツ文字列を解析することによって生成されたノードに要素を置き換えます。

注

要素に親 要素 がない場合、set externalHTML は をスローしますDOM例外。

例： [Chrome デベロッパー コンソール] document.documentElement.outerHTML='a';   Uncaught DOMException: Failed to set the 'outerHTML' property on 'Element': This element'sparent is of type '#document', that is not an element node.

Considering Below code.

// HTML:// <div id="container"><div id="d">This is a div.</div></div>container = document.getElementById("container");d = document.getElementById("d");console.log(container.firstChild.nodeName); // logs "DIV"d.outerHTML = "<p>This paragraph replaced the original div.</p>";console.log(container.firstChild.nodeName); // logs "P"// The #d div is no longer part of the document tree,// the new paragraph replaced it.

while the要素はドキュメント内で置き換えられますが、outerHTML プロパティが設定された変数は、元の要素への参照を保持したままになります!

innerText と externalText

Node.innerText

非標準: 運用サイトでは使用しないでください。

htmlelement.outertext

非標準：生産サイトで使用しないでください。 6

9.6 (おそらくそれ以前)3Node.textContent 異なるノードタイプは異なる結果を取得します (ドキュメントを使用します。 documentElement.textContent

textContent vs innerText		G	et:		docuメント、表記

代わりに).

ノード内のテキスト:

CDATA、コメント、テキストノード、処理命令。 (nodeValue)

子ノードの連結(

コメント、処理命令ノードを除く) text:その他の型node Set:

ノードの子を削除してテキストノードに置き換えます

innerTextとの違い

多くの... : MDN. を参照してください

なぜまだ innerText が必要な場合があるのでしょうか? ブラウザ対応！

IE は、

textContent よりも、innerText

のサポートが優れています。

textContentをサポートしているのはIE9以降のみですが、IE6以降はinnerTextをサポートしています

.

一般的な使用法:

set

t[t.innerText ? 'innerText' : 'textContent'] = v.n

get

it = currHeaderChildNodes[i].innerText || currHeaderChildNodes[i].textContent;

textContent vs. innerHTML

textContent の使用をお勧めします!

innerHTML テキストを HTML として解析します (「

script

」要素を除く) ->パフォーマンスが悪い!

innerHTML にはセキュリティの問題があります!