Resumen

La propiedad Element.innerHTML cambia o devuelve la sintaxis HTML describiendo los descendientes del elemento.

Nota: Si un nodo <div>, <span>, o <noembed> tiene un texto de secundario que incluye los caracteres (&), (<), o (>), innerHTML devuelve estos caracteres como &amp, &lt y &gt respectivamente. Use element.textContent para conseguir una copia correcta del contenido de estos nodos de texto.

Sintaxis

const content = element.innerHTML;

Después de la llamada, content contiene el código HTML serializado describiendo todos los descendientes de element.

 element.innerHTML = content;

Elimina todos los descendientes de element, analiza la cadena content y asigna los nodos resultantes como descendientes de element.

Ejemplo

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Documento sin título</title>
  </head>
  <body>
    <div id="txt">
      <p>primer parrafo hijo de div id="txt"</p>
      <p>segundo parrafo hijo de id="txt" txt</p>
    </div>
  </body>
</html>
txt = document.getElementById("txt");
console.log(txt.innerHTML);
/*
La siguiente cadena (string) se muestra en la ventana de la consola:
<p>primer parrafo hijo de div id="txt"</p> 
<p>segundo parrafo hijo de id="txt" txt</p>
*/

Notas

Esta propiedad proporciona una forma sencilla de reemplazar completamente los contenidos de un elemento. Por ejemplo, los contenidos completos del cuerpo del documento se pueden borrar así:

document.body.innerHTML = "";  // Reemplaza el contenido de <body> con una cadena vacía

La propiedad innerHTML de muchos tipos de elementos—incluyendo <body> o <html>—puede ser devuelta o establecida. También se puede usar para ver el código fuente de una página que ha sido modificada dinámicamente:

// Copie y pegue en la barra de direcciones como una sola línea
javascript:"<pre>"+document.documentElement.innerHTML.replace(/</g,"&lt;") + "</pre>";

Esta propiedad fue inicialmente implementada por navegadores web, y luego especificada por el WHATWG y el W3C en HTML5. Implementaciones antiguas no la implementarán exactamente igual. Por ejemplo, cuando el texto es ingresado en una caja de texto multilinea (elemento textarea), Internet Explorer cambiará el valor de la propiedad innerHTML del elemento textarea, mientras que los navegadores Gecko no lo hacen.

Consideración de seguridad

No es extraño que innerHTML sea usado para  introducir texto en una página web. Esto añade un riesgo de seguridad.

//ejemplo 1
var name = "Juan";
// asumiendo que 'el' es un elemento de HTML DOM
el.innerHTML = name; // sin peligro

// ...

//ejemplo 2
name = "<script>alert('Soy Juan con una alerta molesta!')</script>";
el.innerHTML = name; // fíjese que el texto es molesto y no es realmente lo que se esperaba.

Aunque esto, el ejemplo 2, puede parecer un ataque cross-site scripting, el resultado es inofensivo, ya que HTML5 especifica que un tag <script> insertado a través innerHTML no debe ejecutarse.

Sin embargo, hay maneras de ejecutar JavaScript sin necesidad de utilizar el elemento <script>, por lo que todavía hay un riesgo de seguridad cada vez que se utiliza innerHTML para establecer cadenas de texto sobre las que no tiene control. Por ejemplo:

const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; // con peligro, la alerta ahora si es mostrada

Por esa razón, cuando solo tratamos con texto, es recomendable no usar innerHTML, sino textContent, que no interpretará la cadena pasada como HTML, sino como texto plano.

Especificaciones

Ver también

  • innerDOM - Para aquellos que desean adherirse a los estándares, aquí hay un conjunto de funciones JavaScript que ofrecen serializar o analizar XML para así establecer contenidos de elementos definidos como cadena(s) via el DOM o para conseguir contenidos de elementos obtenidos del DOM como cadenas.
  • jssaxparser - Una solución más robusta (aunque más pesada) que innerDOM (soporta análisis con espacios de nombres, atributos entre comillas simples, secciones CDATA, etc) es este analizador SAX2 cuando se utiliza con su manejador de contenido DOM. (Ofrece String to DOM, DOM to string es significativamente más fácil)
  • Consideraciones de eficiencia: En quirksmode

    MSDN: innerHTML Property

Etiquetas y colaboradores del documento

 Colaboradores en esta página: isaacaaron79, BrodaNoel, CristhianLora1, fscholz, teoli, JAparici
 Última actualización por: isaacaaron79,