innerText frente a innerHTML frente a etiqueta frente a texto frente a texto Contenido frente a texto externo

124

Tengo una lista desplegable que está poblada por Javascript.

Al decidir cuál debería ser el valor predeterminado para mostrar en la carga, me di cuenta de que las siguientes propiedades mostraban exactamente los mismos valores:

  • innerText
  • innerHtml
  • label
  • text
  • textContent
  • outerText

Mi propia investigación muestra pruebas de marcado de banco o comparaciones entre algunas de ellas, pero no todas.

Puedo usar mi propio sentido común y elegir 1 u otro, ya que proporcionan el mismo resultado, pero me preocupa que esta no sea una buena idea si los datos cambian.

Mis hallazgos son:

  • innerText mostrará el valor como está e ignora cualquier formato HTML que pueda estar incluido
  • innerHTML mostrará el valor y aplicará cualquier formato HTML
  • labelparece ser igual que innerText, así que no puedo ver la diferencia
  • textparece ser el mismo innerTextpero la versión abreviada de jQuery
  • textContentparece igual innerTextpero sigue formateando (como \n)
  • outerText parece ser lo mismo que innerText

Mi investigación solo puede llevarme tan lejos como yo solo puedo probar lo que puedo pensar o leer lo que se publica, ¿alguien puede confirmar si mi investigación es correcta y si hay algo especial sobre labely outerText?

javascript html dom MyDaftQuestions
fuente
11
Una de las razones por las que hay tantas formas diferentes de acceder al texto es por las diferencias entre navegadores. Si ya está usando jQuery, debe usarlo .text()para obtener el contenido de texto de un elemento, ya que eso proporcionará la máxima compatibilidad entre navegadores.
JLRishe
2
developer.mozilla.org/en-US/docs/Web/API/…
JLRishe

Respuestas:

101

De MDN :

Internet Explorer introdujo element.innerText. La intención es casi la misma [como textContent] con un par de diferencias:

  • Tenga en cuenta que si bien textContent obtiene el contenido de todos los elementos, incluidos los elementos <script>y <style>, la propiedad específica de IE en su mayoría equivalente, innerText, no.

  • innerText también conoce el estilo y no devolverá el texto de elementos ocultos, mientras que textContent sí lo hará.

  • Como innerText conoce el estilo CSS, activará un reflujo, mientras que textContent no.

Por innerTextlo tanto , no incluirá texto oculto por CSS, pero lo textContenthará.

innerHTML devuelve el HTML como su nombre lo indica. Muy a menudo, para recuperar o escribir texto dentro de un elemento, las personas usan innerHTML. textContent debe usarse en su lugar. Debido a que el texto no se analiza como HTML, es probable que tenga un mejor rendimiento. Además, esto evita un vector de ataque XSS.

En caso de que se ha perdido, permítanme repetir con más claridad: Do no utilizar .innerHTMLa menos que pretenda específicamente para inserción dentro de un elemento HTML y han tomado las precauciones necesarias para garantizar que el código HTML está insertando no puede contener contenido malicioso. Si solo desea insertar texto, use .textContento si necesita admitir IE8 y versiones anteriores, use la detección de funciones para desactivar .textContenty.innerText .

Una razón principal por la que hay tantas propiedades diferentes es que los diferentes navegadores originalmente tenían diferentes nombres para estas propiedades, y todavía no hay soporte completo para todos los navegadores cruzados. Si está utilizando jQuery, debe atenerse a.text() ya que está diseñado para suavizar las diferencias entre navegadores. *

Para algunos de los otros: outerHTMLes básicamente lo mismo que innerHTML, excepto que incluye las etiquetas de inicio y fin del elemento al que pertenece. Parece que no puedo encontrar mucha descripción de outerTextnada. Creo que esa es probablemente una propiedad heredada oscura y debería evitarse.

JLRishe
fuente
3
El problema con el consejo de ese documento in order to retrieve or write text within an element, people use innerHTML. textContent should be used instead, es que textContent no es compatible con IE 8, que todavía está en uso bastante extendido porque esa es la versión incluida con Windows 7. Y FireFox no es compatible con innerText . Entonces, aunque innerHTML no es ideal para el propósito, tiene una mejor confiabilidad entre navegadores.
Adi Inbar
55
@AdiInbar Si necesita admitir navegadores antiguos, lo correcto es usar la detección de funciones para desactivar .textContenty .innerText, o usar algo como jQuery que suaviza estas diferencias de navegador.
JLRishe
1
¡Muchas gracias por esta explicación! Estoy usando flot para mostrar gráficos y no se mostraba en ff porque ff usa textContent. El texto interno siempre estaba indefinido cuando usaba tickFormatter.
Rainhider
1
@bvl No se puede usar textContentcon etiquetas HTML. Si necesita insertar HTML, usaría .innerHTMLo construiría nodos HTML usando document.createElement(), etc.
JLRishe
44
Seguridad: el uso incorrecto de innerHTML(a diferencia de textContent) puede abrir la puerta a ataques XSS (Cross-Site Scripting) en su aplicación. Si el contenido que se inserta en el DOM vía innerHTMLno es completamente confiable, un atacante podría usar un <script>elemento para secuestrar su aplicación autenticada bajo el nivel de autorización de un usuario o administrador. Todos los ataques, incluidos los ataques de aspecto extraño <img src="x.x" onerror="alert('Hacked!');"/>y una miríada de ataques más furtivos, se destruyen de manera efectiva simplemente usando textContenten este contexto en lugar del peligroso innerHTML.
ChaseMoskal
8

Una lista desplegable comprende una colección de Optionobjetos, por lo que debe usar la .textpropiedad para inspeccionar la representación textual del elemento, es decir

<option value="123">text goes here</option>
                    ^^^^^^^^^^^^^^

Por cierto,

.textparece ser el mismo .innerTextpero la versión abreviada de JQuery

Eso no es correcto; $(element).text()es la versión de jQuery, mientras que element.textes la versión de acceso a la propiedad.

Jack
fuente
5

Anexo a la excelente respuesta de JLRishe:

La razón por la que existen innerText y externalText es por la simetría con innerHTML y externalHTML. Esto se vuelve importante cuando asigna a la propiedad.

Supongamos que tiene un elemento econ código HTML <b>Lorem Ipsum</b>:

e.innerHTML = "<i>Hello</i> World!"; => <b><i>Hello</i> World!</b>
e.outerHTML = "<i>Hello</i> World!"; =>    <i>Hello</i> World!
e.innerText = "Hello World!";        => <b>Hello World!</b>
e.outerText = "Hello World!";        =>    Hello World!
Anónimo
fuente
2

textContent no formateará (\ n)

Hariharan
fuente
0

texty labeleliminar espacios extra. Obtuve estos resultados al consultar opciones en un menú desplegable:

e.textContent = "A    B C   D     "
e.text = "A B C D"
e.label = "A B C D"
Jay Jay
fuente