Autor Tema: JavaScript crear nodo DOM document.createElement createTextNode append CU01140E# (Leído 3854 veces)

Dimitar Stefanov · « **en:** 10 de Febrero 2016, 20:44 »

Posible solución del ejercicio CU01140E del curso JavaScript desde cero con ejercicios resueltos de aprenderaprogramar.

Código HTML:

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<meta name="description" content="Curso JavaScript"/>
	<meta name="keywords" content="programar,cursos,aprenderaprogramar.com"/>
	<title>JavaScript</title>
	<link rel="stylesheet" type="text/css" href="CU01140E.css"/>
	<script type="text/javascript" src="CU01140E.js"></script>
</head>
<body>
	<div>
		Curso JavaScript aprenderaprogramar.com
	</div><br/>
	<input type="button" value="Añadir al final" onclick="alFinal()"/>
	<input type="button" value="Anidar" onclick="anidar()"/><br/>
</body>
</html>

Código CSS:

Código: [Seleccionar]

body{
	font-family: sans-serif;
	text-align: center;
}
div{
	border-style: solid;
	margin: 20px;
	padding: 15px;
	display: inline-block;
}

Código JavaScript:

Código: [Seleccionar]

var click=1;

function anidar(){
	var nodoHijo=document.createElement('div');
	var nodoPadre=document.getElementsByTagName('div');
	var nodoText=document.createTextNode('Nodo Creado '+click);
	nodoPadre[0].appendChild(nodoHijo);
	nodoHijo.appendChild(nodoText);
	click++;
}

function alFinal(){
	var nodoHijo=document.createElement('div');
	var nodoText=document.createTextNode('Nodo Creado '+click);
	var nodoPadre=document.getElementsByTagName('html');
	nodoPadre[0].appendChild(nodoHijo);
	nodoHijo.appendChild(nodoText);
	click+=1;
}

Gracias.

pedro,, · « **Respuesta #1 en:** 11 de Febrero 2016, 21:23 »

Hola dimiste.

Tu código hace lo que pide el enunciado.

Tus dos funciones tienen bastantes lineas iguales, aquí te dejo otra manera de resolverlo basado en tu código pero con una sola función y sin tanta repetición.

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<meta name="description" content="Curso JavaScript"/>
	<meta name="keywords" content="programar,cursos,aprenderaprogramar.com"/>
	<title>JavaScript</title>
	<style>
		body{
		font-family: sans-serif;
		text-align: center;
		}
		div{
			border-style: solid;
			margin: 20px;
			padding: 15px;
			display: inline-block;
		}
	</style>
	<script type="text/javascript">
		var click=1;
		function crearNodo(lugarCreacion){
			var nodoHijo=document.createElement('div');
			var nodoText=document.createTextNode('Nodo Creado '+click);
			var nodoPadre=document.getElementsByTagName(lugarCreacion);
			nodoPadre[0].appendChild(nodoHijo);
			nodoHijo.appendChild(nodoText);
			click++;
		}
	</script>
</head>
<body>
	<div>
		Curso JavaScript aprenderaprogramar.com
	</div><br/>
	<input type="button" value="Añadir al final" onclick="crearNodo('html')"/>
	<input type="button" value="Anidar" onclick="crearNodo('div')"/><br/>
</body>
</html>

Saludos.

bermartinv · « **Respuesta #2 en:** 11 de Febrero 2016, 23:19 »

dimiste, si que tiene razón Pedro. Muchas veces con menos código es más sencillo todo. A mi no me salió el código tan corto pero el mio fue algo así:

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
#cuadrado{
    border:solid thin blue;
    width:300px;
    height:300px;
    margin-left:50px;
    margin-top:10px;
   
}
    
#botones{
    
    left:100px;
    margin: 30px;
}

input{
    text-align:center;
    margin:10px ;
}
</style>
<script>
var contador =1;    
    
    function anyadir(donde){
    var nodocuadrado=document.getElementById("cuadrado");
    var nodobody=document.body;
    var nodohijo=document.createElement("span");
    nodohijo.style.color="green";
    nodohijo.id="elemento"+(contador+1);
    nodohijo.innerHTML="Nodo creado "+contador+ "<br/>";
    if (donde=="caja"){
        nodocuadrado.appendChild(nodohijo);
        contador++       
    }
    else {
    nodobody.appendChild(nodohijo);
    contador++;    
    }
    }
</script>
</head>
<body>
    <div id="cuadrado">
        <p>Curso JavaScript aprender a programar</p>    
    </div>
    <div id="botones">
        <input type="button" value="A├▒adir fila" onclick="anyadir('caja')" />
        <input type="button" value="Anidar" onclick="anyadir('fuera')" />
    </div>
</body>
</html>

Dimitar Stefanov · « **Respuesta #3 en:** 12 de Febrero 2016, 13:14 »

Gracias por corregirme el ejercicio y dedicar vuestro tiempo chicos.

Sí, Pedro, tienes razón, no había caido que pasando un parámetro puedes hacer los dos requisitos del ejercicio en la misma función.

Bermartinv, gracias por compartir tu código también. Funciona a la perfección. Has utilizado una condicional para diferencias si el parámetro que le pasas es "caja" o no. Me gusta la idea. Tomo nota de las dos observaciones.

A seguir programando, jeje.

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

Noticias:

Autor Tema: JavaScript crear nodo DOM document.createElement createTextNode append CU01140E# (Leído 3854 veces)

Dimitar Stefanov

JavaScript crear nodo DOM document.createElement createTextNode append CU01140E#

pedro,,

Re:CU01140E JavaScript createElement

bermartinv

Re:CU01140E JavaScript createElement

Dimitar Stefanov

Re:CU01140E JavaScript createElement

Preguntas y respuestas