Diferencia entre innerText y innerHTML

¿Cuál es la diferencia entre innerHTML, innerTexty childNodes[].valueen JavaScript?

Sin innerTextembargo, a diferencia , le innerHTMLpermite trabajar con texto enriquecido HTML y no codifica y decodifica automáticamente el texto. En otras palabras, innerTextrecupera y establece el contenido de la etiqueta como texto sin formato, mientras que innerHTMLrecupera y establece el contenido en formato HTML.

Los siguientes ejemplos se refieren al siguiente fragmento de HTML:

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

El nodo será referenciado por el siguiente JavaScript:

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

element.innerHTML

Establece u obtiene la sintaxis HTML que describe los descendientes del elemento.

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

Esto es parte de la Especificación de análisis y serialización DOM del W3C . Tenga en cuenta que es una propiedad de los Elementobjetos.

node.innerText

Establece u obtiene el texto entre las etiquetas de inicio y fin del objeto

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

• innerTextfue presentado por Microsoft y no fue compatible por un tiempo con Firefox. En agosto de 2016, innerTextfue adoptado por el WHATWG y se agregó a Firefox en v45.
• innerText le ofrece una representación del texto que tiene en cuenta el estilo que intenta coincidir con lo que representa el navegador, esto significa:
  • innerTextaplica text-transformy white-spacegobierna
  • innerText recorta el espacio en blanco entre líneas y agrega saltos de línea entre elementos
  • innerText no devolverá texto para elementos invisibles
• innerTextregresará textContentpara elementos que nunca se representan como <style />y `
• Propiedad de los Nodeelementos

node.textContent

Obtiene o establece el contenido de texto de un nodo y sus descendientes.

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

Si bien este es un estándar W3C , IE <9 no lo admite.

• No conoce el estilo y, por lo tanto, devolverá contenido oculto por CSS
• No desencadena un reflujo (por lo tanto, más eficiente)
• Propiedad de los Nodeelementos

node.value

Este depende del elemento al que te hayas dirigido. Para el ejemplo anterior, xdevuelve un objeto HTMLDivElement , que no tiene una valuepropiedad definida.

x.value // => null

Las etiquetas de entrada ( <input />), por ejemplo, definen una valuepropiedad , que se refiere al "valor actual en el control".

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

De los documentos :

Nota: para ciertos tipos de entrada, el valor devuelto puede no coincidir con el valor que el usuario ha ingresado. Por ejemplo, si el usuario ingresa un valor no numérico en un <input type="number">, el valor devuelto podría ser una cadena vacía.

Script de muestra

Aquí hay un ejemplo que muestra el resultado del HTML presentado anteriormente:

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>

InnerTextLa propiedad html-codifica el contenido, pasando <p>a <p>, etc. Si desea insertar etiquetas HTML, debe usarlas InnerHTML.

En palabras simples:

1. innerTextmostrará el valor tal como está e ignora cualquier HTMLformato que se pueda incluir.
2. innerHTMLmostrará el valor y aplicará cualquier HTMLformato.

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

Para refinarlo aún más y recuperar el valor Alec, por ejemplo, use otro .childNodes [1]

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

En términos de MutationObservers, la configuración innerHTMLgenera una childListmutación debido a que los navegadores eliminan el nodo y luego agregan un nuevo nodo con el valor de innerHTML.

Si configura innerText, characterDatase genera una mutación.

La única diferencia entre innerTexty innerHTMLes que innerTextinserta una cadena tal como está en el elemento, mientras la innerHTMLejecuta como contenido 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>

InnerTextsolo devolverá el valor de texto de la página con cada elemento en una nueva línea en texto sin formato, mientras innerHTMLque devolverá el contenido HTML de todo dentro de la bodyetiqueta y childNodesdevolverá una lista de nodos, como sugiere su nombre.

La innerTextpropiedad devuelve el valor de texto real de un elemento html mientras que el innerHTMLdevuelve el HTML content. Ejemplo a continuación:

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>

para agregar a la lista, innerText mantendrá su transformación de texto, innerHTML no