element.innerHTML

Baseline Widely available *

This feature is well established and works across many devices and browser versions. Its been available across browsers since julio de 2015.

* Some parts of this feature may have varying levels of support.

Learn more
See full compatibility

Resumen

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

Al establecerse se reemplaza la sintaxis HTML del elemento por la nueva.

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

Para insertar el cdigo HTML en el documento en lugar de cambiar el contenido de un elemento, use el mtodo insertAdjacentHTML().

Sintaxis

const content = element.innerHTML;

element.innerHTML = htmlString;

Valor

La variable constante content contiene un DOMString que contiene el cdigo HTML serializado describiendo todos los descendientes de element. Cuando se establece el valor de innerHTML, se eliminan todos los descendientes de element, analiza la cadena htmString y asigna los nodos resultantes como descendientes de element.

Excepciones

SyntaxError: Se intent establecer el valor de innerHTML utilizando una cadena que no est formada correctamente en HTML
NoModificationAllowedError: Se intent insertar el cdigo HTML en un nodo cuyo elemento primario es document.

Notas de uso

La propiedad innerHTML de muchos tipos de elementosincluyendo <body> o <html>puede ser devuelta o establecida. Esta propiedad se puede usar para ver el cdigo HTML de la pgina actual, incluida la que haya sido modificada dinmicamente:

Devolver la sintaxis HTML de un elemento

Devolver el valor de innerHTML hace que el agente de usuario serialice el fragmento HTML compuesto por los descendientes del elemento. La cadena resultante es devuelta.

const content = element.innerHTML;

Esto le permite ver la sintaxis HTML de los nodos contenidos en el elemento.

Reemplazar el contenido de un elemento

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

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

El siguiente ejemplo recupera la sintaxis HTML actual del documento y reemplaza los caracteres "<" con la entidad HTML "<", convirtiendo esencialmente el HTML en texto plano. Esto luego se envuelve en un elemento <pre>. Entonces el valor de innerHTML se cambia a esta nueva cadena. Como resultado, se muestra en pantalla el cdigo fuente completo de la pgina.

document.documentElement.innerHTML =
  "<pre>" + document.documentElement.innerHTML.replace(/</g, "&lt;") + "</pre>";

Nota: Esta propiedad fue inicialmente implementada por navegadores web, y luego especificada por el WHATWG y el W3C en HTML5. Implementaciones antiguas no la implementarn 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.

Consideracin de seguridad

No es extrao que innerHTML sea usado para introducir texto en una pgina web. Esto aade 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; // fjese 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 travs innerHTML no debe ejecutarse.

Sin embargo, hay maneras de ejecutar JavaScript sin necesidad de utilizar el elemento <script>, por lo que todava 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' >";
el.innerHTML = name; // con peligro, la alerta ahora si es mostrada

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

Ejemplo

html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Documento sin ttulo</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>
*/

Especificaciones

Specification
HTML # dom-element-innerhtml

Compatibilidad con navegadores

Vase tambin

innerDOM - Para aquellos que desean adherirse a los estndares, 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 solucin ms robusta (aunque ms pesada) que innerDOM (soporta anlisis 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 ms fcil)

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 20 jun 2025 by MDN contributors.

View this page on GitHub Report a problem with this content

element.innerHTML

In this article

Help improve MDN