nodeValue vs innerHTML y textContent. ¿Como escoger?

Solución:

Diferencias entre textContent / innerText / innerHTML en MDN.

Y una respuesta de Stackoverflow sobre innerText / nodeValue.

Resumen

1. innerHTML analiza el contenido como HTML, por lo que lleva más tiempo.
2. nodeValue utiliza texto directo, no analiza HTML y es más rápido.
3. contenido del texto utiliza texto directo, no analiza HTML y es más rápido.
4. innerText Toma en consideración los estilos. No obtendrá texto oculto, por ejemplo.

innerText no existía en Firefox hasta FireFox 45 según caniuse, pero ahora es compatible con todos los navegadores principales.

.textContent salidas text/plain tiempo .innerHTML salidas text/html.

Ejemplo rápido:

var example = document.getElementById('exampleId');

example.textContent="<a href="https://google.com">google</a>";

salida: google

example.innerHTML = '<a href="https://google.com">google</a>';

salida: google

Puede ver en el primer ejemplo que la salida de tipo text/plain no es analizado por el navegador y da como resultado la visualización del contenido completo. Salida del tipo text/html le dice al navegador que lo analice antes de mostrarlo.

MDN innerHTML, MDN textContent, MDN nodeValue

Los dos que conozco bien y con los que trabajo son innerHTML y contenido del texto.

yo suelo contenido del texto cuando solo quiero cambiar el texto de un párrafo o encabezado así:

var heading = document.getElementById('heading')
var paragraph = document.getElementById('paragraph')

setTimeout(function () {
  heading.textContent="My New Title!"
  paragraph.textContent="My second <em>six word</em> story."
}, 2000)

em { font-style: italic; }

<h1 id="heading">My Title</h1>
<p id="paragraph">My six word story right here.</p>

Entonces, contenido del texto simplemente cambia el texto, pero no analiza HTML, como podemos ver por las etiquetas visibles en texto sin formato en el resultado.

Si queremos analizar HTML, usamos innerHTML como esto:

var heading = document.getElementById('heading')
var paragraph = document.getElementById('paragraph')

setTimeout(function () {
  heading.innerHTML = 'My <em>New</em> Title!'
  paragraph.innerHTML = 'My second <em>six word</em> story.'
}, 2000)

em { font-style: italic; }

<h1 id="heading">My Title</h1>
<p id="paragraph">My six word story right here.</p>

Entonces, ese segundo ejemplo analiza la cadena que asigno al elemento DOM innerHTML propiedad como HTML.

Esto es asombroso y una gran vulnerabilidad de seguridad 🙂

(busque XSS si desea saber sobre seguridad para esto)

---

---

Utiliza Nuestro Buscador