Hola.. después de varias vueltas y gracias a la ayuda de los moderadores, he conseguido sacar una solución al problema propuesto ejercicio CU01140E del tutorial básico de programación web JavaScript desde cero.
Seguro que es mejorable y me gustaría recibir opiniones de como hacerlo mejor. De hecho ahora me propondré a mirar otros ejercicios resueltos
Espero que os sirva.
<!DOCTYPE html>
<html>
<head>
<title>My div</title>
<meta charset="utf-8">
<style type="text/css">
body {font-family: sans-serif; text-align:center; margin-top: 50px;}
#añadirID, #anidarID {padding:15px; width: 130px; margin: 0 auto; color: white; border-radius: 40px; background: rgb(202, 60, 60); cursor: pointer;}
#añadirID:hover, #anidarID:hover {background: rgb(66, 184, 221);}
</style>
<script type="text/javascript">
contador = 1;
function introducirDiv(action) {
if (action == 'añadir') {
var nodoHijo = document.createElement("div");
nodoHijo.textContent = "Nodo creado " + contador;
nodoHijo.style.borderStyle = "solid";
nodoHijo.style.width = "500px";
nodoHijo.style.marginLeft = "450px";
nodoHijo.style.marginTop = "50px";
nodoHijo.style.background = "#F5DA81";
document.body.appendChild(nodoHijo);
contador = contador +1;
}
else {
var nodoLarva = document.createElement("div");
nodoLarva.textContent = "Nodo creado" + contador;
var probeta = document.getElementById('paciente');
probeta.appendChild(nodoLarva);
nodoLarva.style.borderStyle = "solid";
nodoLarva.style.margin = "30px";
nodoLarva.style.background = "#81BEF7";
nodoLarva.style.padding = "25px";
nodoLarva.style.display ="inline-block";
contador = contador +1;
}
}
</script>
</head>
<body>
<div id="paciente" style="border-style:solid; margin: 30px; padding:25px; display:inline-block">Curso de Javascript aprendeaprogramar.com</div>
<br><br><br>
<div style="width: 500px; display:inline-block; margin-left:170px">
<div id="añadirID" style="float:left" onclick="introducirDiv('añadir')">Añadir al final</div>
<div id="anidarID" onclick="introducirDiv('anidar')">Anidar</div>
</div>
</body>
</html>
Por ejemplo me gustaría saber de que mejor forma puedo dar estilos css a los elementos de nueva creación que no sea uno por uno.
Gracias
Tema: JavaScript document.createElement createTextNode appendChild Ejercicio CU01140E (Leído 2713 veces)
RSS -
WAP2