Uso del innerHTML

<script>
	function anadeHtml(){
		document.getElementById("pp").innerHTML="<h1>Casa</h1>";
	}
</script>

<div id="pp" style="background-color:yellow; width:200px; height:200px">
	<input type="button" onclick="anadeHtml()" />
</div>

Ejercicios innerHTML

  1. Ejercicio onMouseOver

    Dadas dos capas, al hacer "onMouseOver" sobre la capa de arriba, que aparezca en la capa de abajo el texto "Has hecho mouse over sobre la capa 1"

  2. Ejercicio mapa

    Teniendo en cuenta que con el siguiente código html puedo pintar una moneda sobre en mapa en cierta posición:

    <div style="width:725px; height:483px; background: url(Bluemap.jpg); margin:auto; overflow:hidden; position:relative">
    	<img src="goldCoin.png" style="width:50px;position:absolute; margin-left:577px; margin-top:75px">
    </div>

    Pintar 10 monedas en coordenadas aleatorias sobre la superficie de un mapa.

    Para ello, tendremos un bucle que en cada iteración irá acumulando el código fuente de imágenes con posiciones aleatorias. Finalmente pintaremos el código fuente generado dentro de un div usando el método innerHTML

    <style>
    #capa{
    	background: pink;
    	width:600px;
    	height: 400px;
    	position: relative;
    }
    </style>
    
    <div id="capa"></div>
    
    <script>
    	let texto = "";
    	
    	for(var i=0; i<100; i++){
    		let y = Math.random()*400;
    		let x = Math.random()*600;
    		texto = texto + '<p style="position:absolute; top: '+y+'px; left: '+x+'">Monteserín Forever</p>'
    	}
    
    	document.getElementById("capa").innerHTML = texto
    
    </script>
icono de mandar un mail¡Contacta conmigo!
contacta conmigoPablo Monteserín

¡Hola! ¿En qué puedo ayudarte?