innerTextとinnerHTMLの違い

違いは何ですかinnerHTML、innerTextとchildNodes[].valueJavaScriptでは？

innerTextただし、とは異なり、innerHTMLHTMLリッチテキストを操作でき、テキストの自動エンコードとデコードは行いません。つまり、innerTextタグのコンテンツをプレーンテキストとしてinnerHTML取得および設定しますが、コンテンツをHTML形式で取得および設定します。

以下の例は、次のHTMLスニペットを参照しています。

<div id="test">
   Warning: This element contains <code>code</code> and <strong>strong language</strong>.
</div>

ノードは次のJavaScriptによって参照されます。

var x = document.getElementById('test');

element.innerHTML

要素の子孫を記述するHTML構文を設定または取得します

x.innerHTML
// => "
// =>   Warning: This element contains <code>code</code> and <strong>strong language</strong>.
// => "

これは、W3CのDOM Parsing and Serialization Specificationの一部です。これはElementオブジェクトのプロパティであることに注意してください。

node.innerText

オブジェクトの開始タグと終了タグの間のテキストを設定または取得します

x.innerText
// => "Warning: This element contains code and strong language."

• innerTextMicrosoftによって導入され、しばらくの間Firefoxでサポートされていませんでした。2016年の8月には、innerTextたWHATWGによって採用されたとV45でのFirefoxに追加されました。
• innerText これは、ブラウザによってレンダリングされたものと一致しようとするテキストのスタイル認識表現を提供します：
  • innerText適用text-transformおよびwhite-space規則
  • innerText 行間の空白を削除し、アイテム間に改行を追加します
  • innerText 非表示のアイテムのテキストを返しません
• innerTextのtextContentようにレンダリングされない要素については<style />、 `
• Node要素のプロパティ

node.textContent

ノードとその子孫のテキストコンテンツを取得または設定します。

x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

これはW3C標準ですが、IE <9ではサポートされていません。

• スタイリングを認識していないため、CSSによって非表示にされたコンテンツを返します
• リフローをトリガーしません（したがって、パフォーマンスが向上します）
• Node要素のプロパティ

node.value

これは、ターゲットにした要素によって異なります。上記の例でxは、プロパティが定義されていないHTMLDivElementオブジェクトを返しますvalue。

x.value // => null

<input />たとえば、入力タグ（）は、「コントロールの現在の値」を参照するvalueプロパティを定義します。

<input id="example-input" type="text" value="default" />
<script>
  document.getElementById('example-input').value //=> "default"
  // User changes input to "something"
  document.getElementById('example-input').value //=> "something"
</script>

ドキュメントから：

注：特定の入力タイプでは、戻り値はユーザーが入力した値と一致しない場合があります。たとえば、ユーザーがに数値以外の値を入力した<input type="number">場合、戻り値は空の​​文字列になる可能性があります。

サンプルスクリプト

上記のHTMLの出力例を次に示します。

var properties = ['innerHTML', 'innerText', 'textContent', 'value'];

// Writes to textarea#output and console
function log(obj) {
  console.log(obj);
  var currValue = document.getElementById('output').value;
  document.getElementById('output').value = (currValue ? currValue + '\n' : '') + obj; 
}

// Logs property as [propName]value[/propertyName]
function logProperty(obj, property) {
  var value = obj[property];
  log('[' + property + ']'  +  value + '[/' + property + ']');
}

// Main
log('=============== ' + properties.join(' ') + ' ===============');
for (var i = 0; i < properties.length; i++) {
  logProperty(document.getElementById('test'), properties[i]);
}

<div id="test">
  Warning: This element contains <code>code</code> and <strong>strong language</strong>.
</div>
<textarea id="output" rows="12" cols="80" style="font-family: monospace;"></textarea>

InnerTextプロパティ回し、コンテンツをHTMLはエンコード<p>に<p>あなたが使用する必要があるHTMLタグを挿入する場合など、InnerHTML。

簡単な言葉で：

1. innerText値がそのまま表示され、HTML含まれている可能性のある書式設定はすべて無視されます。
2. innerHTML値が表示され、HTMLフォーマットが適用されます。

var element = document.getElementById("main");
var values = element.childNodes[1].innerText;
alert('the value is:' + values);

たとえば、さらに調整して値Alecを取得するには、別の.childNodes [1]を使用します。

var element = document.getElementById("main");
var values = element.childNodes[1].childNodes[1].innerText;
alert('the value is:' + values);

観点からMutationObservers、設定がinnerHTML生成childListによるブラウザノードを除去した後の値を使用して新しいノードを追加する変異innerHTML。

を設定するinnerTextと、characterData突然変異が生成されます。

唯一の違いinnerTextとはinnerHTMLつまりinnerText、それは要素の中にあるようながら、挿入文字列innerHTMLのHTMLコンテンツとして実行し、それを。

const ourstring = 'My name is <b class="name">Satish chandra Gupta</b>.';
document.getElementById('innertext').innerText = ourstring;
document.getElementById('innerhtml').innerHTML = ourstring;

.name{
color:red;
}

<h3>Inner text below. It inject string as it is into the element.</h3>
<div id="innertext"></div>
<br />
<h3>Inner html below. It renders the string into the element and treat as part of html document.</h3>
<div id="innerhtml"></div>

InnerTextプレーンテキストのみで改行上の各要素をページのテキスト値を返します、しばらくはinnerHTML内部のすべてのHTMLコンテンツを返しますbodyタグ、およびchildNodes名前が示すように、ノードのリストを返します。

innerTextプロパティを返し、実際のテキストながら、HTML要素の値をinnerHTML返しますHTML content。以下の例：

var element = document.getElementById('hello');
element.innerText = '<strong> hello world </strong>';
console.log('The innerText property will not parse the html tags as html tags but as normal text:\n' + element.innerText);

console.log('The innerHTML element property will encode the html tags found inside the text of the element:\n' + element.innerHTML);
element.innerHTML = '<strong> hello world </strong>';
console.log('The <strong> tag we put above has been parsed using the innerHTML property so the .innerText will not show them \n ' + element.innerText);
console.log(element.innerHTML);

<p id="hello"> Hello world 
</p>

リストに追加するために、innerTextはテキスト変換を保持しますが、innerHTMLはしません