Autor Tema: JavaScript createElement, createTextNode, appendChild. Ejercicio CU01140E web (Leído 3182 veces)

Cabanota · « **en:** 15 de Mayo 2015, 22:18 »

Buenas tardes colegas. aquí dejo una posible solución a este ejercicio. Espero me puedan dar mejoras. De antemano, muchas gracias.

Citar

EJERCICIO

Crea una página web donde inicialmente exista un div con borde solid y ancho delimitado con el texto “Curso JavaScript aprenderaprogramar.com”. Debajo del div deben mostrarse dos botones o pulsadores. Un botón debe indicar “Añadir al final” y otro “Anidar”. Cuando se pulse el botón “Añadir al final”, debe añadirse un div al final de la página con el texto “Nodo creado 1” (o Nodo creado 2, 3, 4… según corresponda). Cuando se pulse el botón “Anidar” debe añadirse un div dentro del div inicial con el texto “Nodo creado 5” (o Nodo creado 6, 7, 8… según corresponda). La numeración será única, es decir, podremos saber en qué orden han sido creados los div estén dentro o fuera del div inicial.

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="UTF-8">
	<style type="text/css">
		div{
			border-style: solid;
			text-align: center;
			padding: 5 px;
			width: 350px;
			margin-bottom: 20px;
		}
	</style>
	<script type="text/javascript">
		var cont = 1;
		var insertarElemento2;
		function inicio () {
			insertarElemento1 = document.getElementById("body");
			insertarElemento2 = document.getElementById("divInicial");
		}
		
		function anidarElemento0 () {
			var nodoHijo = document.createElement("div");
			var textNodoHijo = document.createTextNode("Nodo creado " + cont);
			nodoHijo.style.width = "150px";
			nodoHijo.style.textAlign = "center";
			nodoHijo.appendChild(textNodoHijo);
			insertarElemento1.appendChild(nodoHijo);
			cont++;	
		}
		function anidarElemento () {
			var nodoHijo = document.createElement("div");
			var textNodoHijo = document.createTextNode("Nodo creado " + cont);
			nodoHijo.style.width = "150px";
			nodoHijo.style.margin = "0px auto";
			nodoHijo.style.textAlign = "center";
			nodoHijo.appendChild(textNodoHijo);
			insertarElemento2.appendChild(nodoHijo);
			cont++;	
		}
	</script>
</head>
<body id="body">
	<div id="divInicial">Curso JavaScript aprenderaprogramar.com</div>
	<input type="button" value="Añadir al final" onclick="anidarElemento0()"/>
	<input type="button" value="Anidar" id="btnAnidar" onclick="anidarElemento()" />
	
	<script type="text/javascript">
		inicio();
	</script>
</body>
</html>

Mario R. Rancel · « **Respuesta #1 en:** 16 de Mayo 2015, 20:18 »

Hola Cabanota, la solución aportada hace lo que pedía el ejercicio.

Como cuestiones a tener en cuenta para mejorar:

Si te fijas tus funciones anidarElemento0 y anidarElemento son muy parecidas, casi repetidas. Como programadores tenemos que tratar de evitar la repetición. Esto hay que irlo adquiriendo como hábito para lograr cumplir con "las buenas prácticas de los buenos programadores". Si vemos repetición tenemos que preguntarnos, ¿cómo puedo evitarla?

En este caso podríamos hacerlo así (también de otras maneras):

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="UTF-8">
	<style type="text/css">
		div{
			border-style: solid;
			text-align: center;
			padding: 5 px;
			width: 350px;
			margin-bottom: 20px;
		}
	</style>
	<script type="text/javascript">
		var cont = 1;
		var insertarElemento2;
		function inicio () {
			insertarElemento1 = document.getElementById("body");
			insertarElemento2 = document.getElementById("divInicial");
		}
		
		function annadir_elemento (formaAdicion) {
			var nodoHijo = document.createElement("div");
			var textNodoHijo = document.createTextNode("Nodo creado " + cont);
			nodoHijo.style.width = "150px";
			nodoHijo.style.textAlign = "center";
			nodoHijo.appendChild(textNodoHijo);
			if (formaAdicion=='al_final') {insertarElemento1.appendChild(nodoHijo);}
			if (formaAdicion=='anidar') {insertarElemento2.appendChild(nodoHijo);}
			cont++;	
		}
	</script>
</head>
<body id="body">
	<div id="divInicial">Curso JavaScript aprenderaprogramar.com</div>
	<input type="button" value="Añadir al final" onclick="annadir_elemento('al_final')"/>
	<input type="button" value="Anidar" id="btnAnidar" onclick="annadir_elemento('anidar')" />
	
	<script type="text/javascript">
		inicio();
	</script>
</body>
</html>

Saludos

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: