javascript - span - nodeValue versus innerHTML y textContent. ¿Como escoger?

textcontent jquery

Question

Estoy utilizando plain js para alterar el texto interno de un elemento de etiqueta, y no estaba seguro de qué motivos debo usar innerHTML o nodeValue o textContent. No necesito crear un nuevo nodo ni cambiar los elementos HTML ni nada, simplemente reemplace el texto. Aquí hay un ejemplo del código:

var myLabel = document.getElementById("#someLabel");
myLabel.innerHTML = "Some new label text!"; // this works

myLabel.firstChild.nodeValue = "Some new label text!"; // this also works.

myLabel.textContent = "Some new label text!"; // this also works.

Miré a través de la fuente jQuery, y utiliza nodeValue exactamente una vez pero innerHTML y textContent varias veces. Luego encontré esta prueba jsperf que indica que firstChild.nodeValue es significativamente más rápido. Al menos eso es lo que interpreto que significa.

Si firstChild.nodeValue es mucho más rápido, ¿cuál es el truco? ¿No es ampliamente compatible? ¿Hay algún otro problema?

Answer 1

Los dos que conozco y con los que trabajo son innerHTML y textContent .

Uso textContent cuando solo quiero cambiar el texto de un párrafo o un encabezado como sigue :

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, textContent simplemente cambia el texto, pero no analiza el HTML, como podemos ver en las etiquetas visibles en texto plano en el resultado.

Si queremos analizar HTML, usamos innerHTML de la siguiente manera:

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 a la propiedad innerHTML del elemento DOM como HTML.

Esto es asombroso, y una gran vulnerabilidad de seguridad:)

(busque XSS si quiere saber sobre seguridad para esto)

Answer 2

Diferencias entre textContent / innerText / innerHTML en MDN.

Y una respuesta sobre innerText / nodeValue.

Resumen

1. nodeValue es un poco más confuso de usar, pero más rápido que innerHTML.
2. innerHTML analiza el contenido como HTML y lleva más tiempo.
3. textContent utiliza texto directo, no analiza HTML y es más rápido.
4. innerText tiene en cuenta 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 principales navegadores.

Answer 3

.textContent genera text/plain mientras .innerHTML genera text/html .

Ejemplo rápido:

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

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

salida: <a href="http://google.com"> google </a>

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 analizada por el navegador y da como resultado la visualización completa del contenido. La salida del tipo text/html le dice al navegador que la analice antes de mostrarla.

MDN innerHTML , developer.mozilla.org/en-US/docs/Web/API/Node/textContent , MDN nodeValue

Answer 4

innerText es aproximadamente lo que obtendrías si seleccionas el texto y lo copias. Los elementos que no se representan no están presentes en innerText.

textContent es una concatenación de los valores de todos los TextNodes en el subárbol. Ya sea prestado o no.

Aquí hay una gran publicación que detalla las diferencias

innerHTML no debe incluirse en una comparación con innerText o textContent, ya que es totalmente diferente, y realmente debería saber por qué :-) Búscalo por separado