Resumen: Entrega nº40 del curso "Tutorial básico del programador web: JavaScript desde cero".
Codificación aprenderaprogramar.com: CU01140E

 

 

CREAR NODOS DEL DOM

Hasta ahora hemos visto cómo acceder a nodos del DOM y modificar sus propiedades. ¿Es posible crear nodos y añadirlos en puntos específicos del árbol del DOM? Sí, esto es posible gracias a métodos disponibles para el objeto document de JavaScript. Vamos a estudiar distintos métodos como createElement, createTextNode y appendChild que nos permiten realizar operaciones sobre nodos del DOM.

 

logo javascript

 

CREAR UN NODO

Un nodo de tipo Element se crea invocando el método createElement del objeto document de JavaScript. La sintaxis a emplear normalmente es de este tipo:

var nuevoNodo = document.createElement('tagElegido');

 

 

Donde tagElegido representa el tipo de nodo que vamos a crear indicando su correspondiente etiqueta HTML. Por ejemplo var nuevoNodo = document.createElement('div'); crea un nodo <div> … </div>.

Un nodo de tipo Text se crea invocando el método createTextNode del objeto document de JavaScript. La sintaxis a emplear normalmente es de este tipo:

var nodoTexto = document.createTextNode('texto contenido en el nodo');

 

 

Donde 'texto contenido en el nodo' indica el texto que queremos insertar.

Normalmente tendremos que crear la dependencia en el árbol del DOM por el cual un nodo creado deberá definirse como hijo de un nodo ya existente. Es la forma de que un nodo creado se integre dentro de nuestra página web. La sintaxis a emplear normalmente es de este tipo:

nombreNodoPadre.appendChild(nombreNodoHijo);

 

 

Escribe este código, guárdalo como archivo html y comprueba sus resultados en tu navegador:

<!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>

 

 

El resultado esperado es que cada vez que se hace click dentro del div principal, se añade un nuevo div de forma que por cada pulsación van apareciendo nuevos recuadros donde se indica “Soy el nodo hijo 1”, “Soy el nodo hijo 2”, “Soy el nodo hijo 3”, etc. En este ejemplo, la pulsación en cualquier parte interior al div inicial (estemos o no dentro de un div hijo) genera el evento por el cual se crea un hijo.

 

 

MODIFICAR LA PROPIEDAD ONCLICK CON JAVASCRIPT

En este otro ejemplo vemos cómo podemos crear un div interno a aquel div en que se hace click. Para ello, hemos de establecer la propiedad onclick del nodo creado. La sintaxis a emplear para ello es esta:

nombreDeNodo.onclick = function() {nombreDeFuncion(param1, param2, …, paramN)};

 

 

nombreDeFuncion indica la función que debe ejecutarse como respuesta al evento onclick. Param1, param2, …, paramN indica los parámetros que se le pasan a la función (en caso de no existir parámetros simplemente se abrirán y cerrarán paréntesis).

Escribe este código, guárdalo como archivo html y comprueba sus resultados en tu navegador:

<!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: 20px; padding:15px; display:inline-block;}

</style>

<script type="text/javascript">

var contador = 1;

function crearNodoHijo(nodoPadre) {

if (nodoPadre.children.length == 0) {

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

                nodoHijo.id ='divElementID'+contador;

                nodoHijo.onclick = function() {crearNodoHijo(this)};

                nodoHijo.innerHTML = ''+contador;

                if (contador%2 == 0) {nodoHijo.style.backgroundColor = '#E9967A';}

                else {nodoHijo.style.backgroundColor = 'yellow'; }

                nodoPadre.appendChild(nodoHijo);

                contador = contador +1;

}

}

</script>

</head>

<body>

<div id="nodoRaiz" onclick="crearNodoHijo(this)" style="background-color:#E6E6FA">

Contenido inicial

</div>

</body>

</html>

 


Merece la pena detenernos en la línea nodoHijo.onclick = function() {crearNodoHijo(this)};

Para establecer el valor del atributo onclick de un nodo, hemos de definir una función para ser ejecutada. Esto se hace con la sintaxis que hemos indicado. No es válido nodoHijo.onclick = 'crearNodoHijo(this) '; porque equivale a asignar un texto, ni nodoHijo.onclick = crearNodoHijo(this); porque aquí estaríamos asignando a la propiedad el hipotético resultado (obtenido con return) de ejecutar la función crearNodoHijo.

El resultado esperado es que cada vez que hacemos click en el div más interno entro todos los existentes, se genere un nuevo div, y que los colores se vayan alternando entre color amarillo y un color salmón. El evento onclick se genera para todos los div existentes (ya que el más interno está contenido dentro de todos ellos). Es decir, suponiendo que tengamos por ejemplo tres div uno externo, otro intermedio y otro interno, al pulsar encima del div interno se generan tres eventos onclick, uno para cada div. No obstante, en nuestro ejemplo sólo generamos un nodo hijo si el nodo que recibe el click no tiene hijos. De este modo, no se generan nuevos hijos excepto para el div más interno, que es el único que no tiene hijos, mientras que los div más externos no sufren cambios.

Gráficamente, el resultado esperado es que se vayan generando sucesivos recuadros internos a medida que se pulsa en el recuadro central.

appendChild javascript dom

 

 

¿Podríamos determinar usando JavaScript en qué div exactamente se está haciendo click sin tener que basarnos en el número de hijos que tenga? Sí, esto está relacionado con la captura de eventos y lo estudiaremos más adelante.

 

 

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.

Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

 

Descargar archivo: