Resumen
innerHTML cambia o devuelve la sintaxis HTML describiendo los descendientes del elemento.
<div>, <span>, o <noembed> tiene un texto de nodo hijo que incluye los caracteres (&), (<), o (>), innerHTML devuelve estos caracteres como &, < y > respectivamente. Use element.textContent para conseguir una copia correcta del contenido de estos nodos de texto.Sintaxis
var 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
<html>
<head></head>
<body>
<div id="txt">
<script id="txt0"> x=0 </script>
<noembed id="txt1"> 1 </noembed>
<noframes id="txt2"> 2 </noframes>
<noscript id="txt3"> 3 </noscript>
<div id="txt4"> 4 </div>
<div>
<noscript id="txt5"> 5 </noscript>
</div>
<span id="txt6"> 6 </span>
</div>
<div id="innerHTMLtxt"></div>
<div id="textContenttxt"><div>
<script>
for (i=0;i<7;i++){
x="txt"+i;
document.getElementById(x).firstChild.nodeValue='&<>'
}
document.getElementById("innerHTMLtxt").textContent=document.getElementById("txt").innerHTML
document.getElementById("textContenttxt").textContent=document.getElementById("txt").textContent
</script>
<body>
</html>
// HTML:
// <div id="d"><p>Content</p>
// <p>Elaborados Superiores</p>
// </div>
d = document.getElementById("d");
dump(d.innerHTML);
// la cadena "<p>Content</p><p>Elaborados Superiores</p>"
// es lanzada a la ventana de la consola
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 = ""; // Replaces body content with an empty string.
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 fuente de una página que ha sido modificada dinámicamente:
// Copiar y pegar en la barra de direcciones como una línea simple javascript:"<pre>"+document.documentElement.innerHTML.replace(/</g,"<") + "</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 entrado en una caja de texto, Internet Explorer cambia el valor del atributo de la entrada de la propiedad innerHTML, pero 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.
var name = "Juan";
// asumiendo que 'el' es un elemento de HTML DOM
el.innerHTML = name; // sin peligro
// ...
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.
Este es un ejemplo burdo, pero a veces, el texto insertado viene de una entrada de usuario, luego guardado en una base de datos, < y > no han sido configurados y el texto se muestra a otros visitantes. En ese caso, cualquiera puede insertar un script y usarlo para hacer más daño que una alerta, como robo de cookies, por ejemplo. Este ataque se llama cross-site scripting.
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
- W3C's HTML 5
innerHTMLpara documentos HTML - W3C's HTML 5
innerHTMLpara documentos XHTML
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