JavaScript createElement, createTextNode, appendChild. Modificar propiedad onclick con JavaScript (CU01140E)

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:

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:

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:

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

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:

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:

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.

¿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.