Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: 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:
<!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
-
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:
<!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. ;D
-
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
-
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
-
puedes probar
document.body.appendChild(nodoHijo);
saludos.
-
Muchas gracias.. me ha servido..
Sigo investigando para resolver el ejercicio