innerHTML

Contactar con el profesor

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

<script>
	const anadeHTML = _ =>{
		document.querySelector("#pp").innerHTML="<h1>Casa</h1>";
	}
	document.querySelector('#pp').addEventListener('click', anadeHTML)
</script>

Ejercicios: innerHTML

1. Ejercicio: mouseover
Dadas dos capas, al hacer “mouseover” 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

← Efecto parallax
Propiedad style →

Aviso Legal | Política de privacidad