Clase 2017-02-07
[Fecha de publicación: 2017-02-07]
element
INNER HTML
La propiedad innerHTML de los nodos de tipo elemento nos permite acceder al código HTML comprendido entre las etiquetas de apertura y cierre que definen el nodo y modificarlo si lo deseamos. La aplicación más sencilla puede ser modificar un texto, pero el verdadero potencial de innerHTML es el de modificar el código HTML en sí, no solo el texto.
Mucha gente usa innerHTML para modificar texto, pero realmente tenemos otras opciones para hacer modificaciones en texto: textContent o nodeValue nos pueden servir para ello.
element
Resumen
innerHTML cambia o devuelve la sintaxis HTML describiendo los descendientes del elemento.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
<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 consolaNotas
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.
Comentarios
Publicar un comentario