Autor Tema: JavaScript crear nuevos elementos nodos createElement ejemplo ejercicio CU01140E (Leído 3505 veces)

Salvadoruve2 · « **en:** 08 de Julio 2016, 12:33 »

Hola, estoy atascado en la entrega CU01140E del curso básico de programación web con Javascript desde cero.

Habiendo entendido los dos ejemplos del apartado relacionados con la creación de un nuevo elemento a través de "createElement", he aprendido a crear un nuevo elemento (por ejemplo div) dentro de otro elemento en el cual invocamos una función.

Aquí ejemplo básico:

Código: [Seleccionar]

 <!DOCTYPE html>

<html>

<head> <title>Curso JavaScript aprenderaprogramar.com</title>

<meta charset="utf-8">

<style type="text/css">

body {font-family: sans-serif; text-align:center; }

div {border-style:solid;margin: 30px; padding:25px; display:inline-block;}

div div {background-color: yellow;}

</style>

<script type="text/javascript">

var contador = 1

function crearNodoHijo(nodoPadre) {

var nodoHijo = document.createElement("div");

var nodoTexto = document.createTextNode("Soy el nodo hijo "+contador);

nodoHijo.appendChild(nodoTexto);

nodoPadre.appendChild(nodoHijo);

contador = contador +1;

}

</script>

</head>

<body>

<div id="nodoRaiz" onclick="crearNodoHijo(this)">

Contenido inicial es este texto

</div>

</body>
</html>

Mi problema llega al intentar resolver el ejercicio propuesto. Ya que me piden que cree un elemento 'div' fuera del elemento que invoca a la función.. Y no tengo ningún caso anterior que me enseñe hacer eso.

En mi caso invoco a la función de creación de elementos desde un botón.. y me gustaría crear un elemento 'div' que su nodo padre sea body...

Podéis darme algunas nociones? gracias

pedro,, · « **Respuesta #1 en:** 08 de Julio 2016, 20:01 »

Hola Salvador.

Si no te he entendido mal, lo que no sabes es como decir donde tienen que ir los nodos que se creen.
Aquí te dejo un ejemplo basado en el ejemplo que tu has puesto:

Código: [Seleccionar]

<!DOCTYPE html>

<html>
	
	<head> <title>Curso JavaScript aprenderaprogramar.com</title>
		
		<meta charset="utf-8">
		
		<style type="text/css">
			
			body {font-family: sans-serif; text-align:center; }
			
			div {border-style:solid;margin: 30px; padding:25px; display:inline-block;}
			
			div div {background-color: yellow;}
			
		</style>
		
		<script type="text/javascript">
			
			var contador = 1
			
			function crearNodo() {
				var nodoHijo = document.createElement("div");				
				var nodoTexto = document.createTextNode("Soy el nodo hijo "+contador);				
				nodoHijo.appendChild(nodoTexto);
				
				var lugarCreacion = document.getElementById('contenedorNuevosNodos');
				lugarCreacion.appendChild(nodoHijo);				
				contador = contador +1;				
			}
			
		</script>		
	</head>
	<body>		
		<div id="nodoRaiz" onclick="crearNodo()">			
			Contenido inicial es este texto			
		</div>
		<span id="contenedorNuevosNodos"></span>
	</body>
</html>

Saludos.

Salvadoruve2 · « **Respuesta #2 en:** 08 de Julio 2016, 20:05 »

Vale si, esto me aclara muchas cosas.. En este caso ya puedo resolver como introducir en mi función nuevos elementos para trabajar con ellos, usando el getElement... Gracias.. Cuando avance en el ejercicio seguro necesitaré mas ayuda.. XD

Salvadoruve2 · « **Respuesta #3 en:** 08 de Julio 2016, 20:24 »

Disculpa pedro,, pero realizando la opración me he dado cuenta de que hay algo que me falta..

Según el método que me has mostrado, aún necesito de un elemento span, div, h1, etc.. donde poder alojar mi nuevo elemento creado...

lo que a mi me gustaría es crear dentro del body, un nuevo elemento. Un div, span, etc... siendo el body su nodo padre directo..

Es posible eso?

Y si es posible, como puedo dotar a ese nuevo elemento de características con css antes de crearlo?

gracias

pedro,, · « **Respuesta #4 en:** 08 de Julio 2016, 22:31 »

puedes probar
document.body.appendChild(nodoHijo);

saludos.

Salvadoruve2 · « **Respuesta #5 en:** 09 de Julio 2016, 10:44 »

Muchas gracias.. me ha servido..

Sigo investigando para resolver el ejercicio

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

Noticias:

Autor Tema: JavaScript crear nuevos elementos nodos createElement ejemplo ejercicio CU01140E (Leído 3505 veces)

Salvadoruve2

JavaScript crear nuevos elementos nodos createElement ejemplo ejercicio CU01140E

pedro,,

Re:(CU01140E)

Salvadoruve2

Re:(CU01140E)

Salvadoruve2

Re:(CU01140E)

pedro,,

Re:(CU01140E)

Salvadoruve2

Re:(CU01140E)

Preguntas y respuestas