innerHTMLinnerHTML 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.
Especificaciones
- W3C's HTML 5
innerHTMLpara documentos HTML - W3C's HTML 5
innerHTMLpara documentos XHTML
Tomado de:https://developer.mozilla.org/es/docs/Web/API/Element/innerHTML
Eventos
onblur
Este elemento ha perdido el enfoque.
Ejemplo
Cuando deselecciones este control, el color de su contenedor cambiará:
onfocus
El elemento ha ganado el enfoque.
Ejemplo
Cuando selecciones este control, el color de fondo de su contenedor cambiará:
onkeypress
una tecla asociada con un carácter ha sido presionada mientras este elemento tenía el enfoque.
En contraste con
onkeydown y onkeyup, este evento no será ejecutado por teclas que no están asociadas a caracteres de entrada (la mayoría imprimibles) como, por ejemplo, ALT, CTRL, INS y DEL.
Ejemplo
Cuando presiones una tecla de 'carácter' mientras editas este control, el color de fondo de su contenedor cambiará:
onkeydown
Una tecla ha sido presionada mientras este elemento tenía el enfoque.
Ejemplo
Cuando presiones una tecla mientras editas este control, el color de fondo de su contenedor cambiará:
onkeyup
Una tecla ha sido soltada mientras este elemento tenía el enfoque.
Ejemplo
Cuando sueltes una tecla mientras editas este control, el colo de fondo de su contenedor cambiará:
onload
El navegador ha completado la carga del recurso provisto por este elemento.
ejemplos en clase:
1 ejercicio
<script>
function sumar(){
var a= parseInt(document.getElementById("a").value);
var b= parseInt(document.getElementById("b").value);
//alert( a + b );
//document.write( a + b );
document.getElementById("rta").value= a + b;
document.getElementById("mirespuesta").innerHTML= a + b;
}
function sumar2(a, b){
document.getElementById("rta").value= a + b;
document.getElementById("mirespuesta").innerHTML= a + b;
}
function restar(){
var a= parseInt(document.getElementById("a").value);
var b= parseInt(document.getElementById("b").value);
//alert( a + b );
//document.write( a + b );
document.getElementById("rta").value= a - b;
document.getElementById("mirespuesta").innerHTML= a - b;
}
function multi(){
var a= parseInt(document.getElementById("a").value);
var b= parseInt(document.getElementById("b").value);
//alert( a + b );
//document.write( a + b );
document.getElementById("rta").value= a * b;
document.getElementById("mirespuesta").innerHTML= a * b;
}
sumar2(32, 2);
</script>
<body>
<div id="mirespuesta">hola</div>
A: <input type="text" id="a"><br>
B: <input type="text" id="b"><br>
RTA: <input type="text" id="rta" readonly ><br>
<input type="button" value="Sumar" onclick="sumar();" ><br>
<input type="button" value="Restar" onclick="restar();" ><br>
<input type="button" value="multiplicar" onclick="multi();" ><br>
</body>
2 ejercicio
<script>
function s(){
var a = parseInt(document.getElementById("a").value);
var b = parseInt(document.getElementById("b").value);
//alert ( a + b);
//document.write( a + b);
var rta = a + b;
document.getElementById("rta").value = rta;
document.getElementById("holita").innerHTML = "<marquee><b><font color='#ff0000'>" + "Esto es el resultado de mi suma = " + (a + b ) + "</font></b></marquee>";
}
function r(){
var a = parseInt(document.getElementById("a").value);
var b = parseInt(document.getElementById("b").value);
//alert ( a + b);
//document.write( a + b);
document.getElementById("rta").value = a - b;
document.getElementById("holita").innerHTML = "<marquee><b><font color='#ff0000'>" + "Esto es el resultado de mi resta = " + (a - b ) + "</font></b></marquee>";
}
</script>
<body>
<label>A:</label> <input type="text" id="a" autocomplete="off"><br>
B: <input type="text" id="b"><br>
Rta: <input type="text" id="rta" readonly ><hr>
<input type="button" value="Sumar" onclick="s();" >
<input type="button" value="Restar" onclick="r();">
<input type="button" value="Multiplicar" >
<hr>
<div id="holita">esto es mi mensaje</div>
<hr>
</body>
