¿Diferencia entre innerText, innerHTML y value?

Solución:

Los siguientes ejemplos hacen referencia al siguiente fragmento de HTML:

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

El siguiente JavaScript hará referencia al nodo:

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 serialización y análisis DOM del W3C. Tenga en cuenta que es una propiedad de Element objetos.

node.innerText

Establece u obtiene el texto entre las etiquetas de inicio y finalización del objeto

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

• innerText fue introducido por Microsoft y durante un tiempo no fue compatible con Firefox. En agosto de 2016, innerText fue adoptado por WHATWG y agregado a Firefox en v45.
• innerText le brinda una representación del texto que tiene en cuenta el estilo que intenta coincidir con lo que representa el navegador, esto significa:
  • innerText aplica text-transform y white-space normas
  • innerText recorta el espacio en blanco entre líneas y agrega saltos de línea entre elementos
  • innerText no devolverá texto para elementos invisibles
• innerText volverá textContent para elementos que nunca se renderizan como <style /> y ‘
• Propiedad de Node elementos

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, no es compatible con IE <9.

• No es consciente del estilo y, por lo tanto, devolverá contenido oculto por CSS
• No desencadena un reflujo (por lo tanto, más rendimiento)
• Propiedad de Node elementos

node.value

Éste depende del elemento al que te hayas dirigido. Para el ejemplo anterior, x devuelve un objeto HTMLDivElement, que no tiene un value propiedad definida.

x.value // => null

Etiquetas de entrada (<input />), por ejemplo, defina un value propiedad, 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, es posible que el valor devuelto no coincida con el valor que ha introducido el usuario. 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 en su lugar.

Ejemplo de guion

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>

diferente a innerText, aunque, innerHTML le permite trabajar con texto enriquecido HTML y no codifica ni decodifica texto automáticamente. En otras palabras, innerText recupera y establece el contenido de la etiqueta como texto sin formato, mientras que innerHTML recupera y establece el contenido en formato HTML.

InnerText propiedad html-codifica el contenido, convirtiendo <p> para <p>, etc. Si desea insertar etiquetas HTML, debe utilizar InnerHTML.

---

---

Utiliza Nuestro Buscador