Unterschied zwischen innerText und innerHTML

Was ist der Unterschied zwischen innerHTML, innerTextund childNodes[].valuein JavaScript?

Im Gegensatz zu innerText, obwohl, innerHTMLkönnen Sie mit HTML Rich Text arbeiten und nicht automatisch kodieren und dekodieren Text. Mit anderen Worten, innerTextruft den Inhalt des Tags ab innerHTMLund legt ihn als einfachen Text fest, während der Inhalt im HTML-Format abgerufen und festgelegt wird.

Die folgenden Beispiele beziehen sich auf das folgende HTML-Snippet:

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

Der Knoten wird von folgendem JavaScript referenziert:

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

element.innerHTML

Legt die HTML-Syntax fest oder ruft sie ab, die die Nachkommen des Elements beschreibt

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

Dies ist Teil der DOM-Analyse- und Serialisierungsspezifikation des W3C . Beachten Sie, dass es eine Eigenschaft von ElementObjekten ist.

node.innerText

Legt den Text zwischen den Start- und End-Tags des Objekts fest oder ruft ihn ab

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

• innerTextwurde von Microsoft eingeführt und für eine Weile von Firefox nicht unterstützt. Im August 2016 innerTextwurde von der WHATWG übernommen und in Version 45 zu Firefox hinzugefügt.
• innerText gibt Ihnen eine stilbewusste Darstellung des Textes, der versucht, mit dem übereinzustimmen, was vom Browser gerendert wird. Dies bedeutet:
  • innerTextgilt text-transformund white-spaceRegeln
  • innerText schneidet Leerzeichen zwischen Zeilen ab und fügt Zeilenumbrüche zwischen Elementen hinzu
  • innerText gibt keinen Text für unsichtbare Elemente zurück
• innerTextwird textContentfür Elemente zurückgegeben, die niemals wie <style />und ` gerendert werden
• Eigenschaft von NodeElementen

node.textContent

Ruft den Textinhalt eines Knotens und seiner Nachkommen ab oder legt diesen fest.

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

Dies ist zwar ein W3C-Standard , wird jedoch von IE <9 nicht unterstützt.

• Ist sich des Stils nicht bewusst und gibt daher von CSS ausgeblendete Inhalte zurück
• Löst keinen Reflow aus (daher performanter)
• Eigenschaft von NodeElementen

node.value

Dieser hängt von dem Element ab, auf das Sie abgezielt haben. Gibt im obigen Beispiel xein HTMLDivElement- Objekt zurück, für das keine valueEigenschaft definiert ist.

x.value // => null

Eingabe-Tags ( <input />) definieren beispielsweise eine valueEigenschaft , die sich auf den "aktuellen Wert im Steuerelement" bezieht.

<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>

Aus den Dokumenten :

Hinweis: Bei bestimmten Eingabetypen stimmt der zurückgegebene Wert möglicherweise nicht mit dem vom Benutzer eingegebenen Wert überein. Wenn der Benutzer beispielsweise einen nicht numerischen Wert in ein eingibt <input type="number">, kann der zurückgegebene Wert stattdessen eine leere Zeichenfolge sein.

Beispielskript

Hier ist ein Beispiel, das die Ausgabe für den oben dargestellten HTML-Code zeigt:

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>

InnerTextDie Eigenschaft html kodiert den Inhalt, wendet sich <p>an <p>usw. Wenn Sie HTML-Tags einfügen möchten, müssen Sie diese verwenden InnerHTML.

In einfachen Worten:

1. innerTextzeigt den Wert unverändert an und ignoriert eventuell enthaltene HTMLFormatierungen.
2. innerHTMLzeigt den Wert an und wendet alle HTMLFormatierungen an.

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

Verwenden Sie einen anderen .childNodes [1], um ihn weiter zu verfeinern und beispielsweise den Wert Alec abzurufen.

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

In Bezug auf erzeugt die MutationObserversEinstellung innerHTMLeine childListMutation, da die Browser den Knoten entfernen und dann einen neuen Knoten mit dem Wert von hinzufügen innerHTML.

Wenn Sie festlegen innerText, wird eine characterDataMutation generiert.

Der einzige Unterschied zwischen innerTextund innerHTMLbesteht darin, dass innerTextdie Zeichenfolge so wie sie ist in das Element eingefügt wird, während innerHTMLsie als HTML-Inhalt ausgeführt wird.

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>

InnerTextGibt nur den Textwert der Seite mit jedem Element in einer neuen Zeile im Klartext zurück, während innerHTMLder HTML-Inhalt aller Elemente im bodyTag zurückgegeben wird und childNodeseine Liste der Knoten zurückgegeben wird, wie der Name schon sagt.

Die innerTextEigenschaft gibt den tatsächlichen Textwert eines HTML-Elements zurück, während die innerHTMLden Wert zurückgibt HTML content. Beispiel unten:

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>

Um der Liste hinzuzufügen, behält innerText Ihre Texttransformation bei, innerHTML nicht