To be an artist, you have to nurture the things that most people discard.

Richard Avedon

menú
 

Sobre append, variantes y nodos

 

Hace unos días, ampliando la funcionalidad de JaSper me surgió un dilema.

Concretamente con los métodos append, insertBefore, insertAfter y prepend. Todos ellos hacen mas o menos lo que dicen: colocan nodos [antes|después|dentro|fuera]. Hasta ahora la funcionalidad que proveían se limitaba a insertar nodos ya existentes que recibían por parámetro, yo quería que (además) pudiesen recibir una cadena HTML cualquiera, transformarla en nodos e insertarlos según el método elegido.

No fue excesivamente complicado, tuve que aumentar (de paso) la funcionalidad del constructor de nodos JaSper.nodo.crear, tan sencillo como crear un nodo padre cualquiera y pasarle el fragmento HTML para que se lo inserte con innerHTML.

La parte complicada es que esa forma de creación de nodos no los liga al árbol DOM, así que a la hora de pasarselos a append (o cualquiera de las otras variantes), intenta insertarlos mediante appendChild o insertBefore. Como es un arrayLike (un nodeList) cada nodo individual no se copia, simplemente se mueve, así que puede darse el caso de que el nodeList original que los contiene vaya mermando a medida que los nodos van pasando a su nuevo padre.

Eso implica que un bucle normal no funciona, pudiendo llegar al extremo de generar un bucle infinito o tomar sólo parte de los nodos en la operación (pares o impares, según se construya el bucle).

De momento no tengo tiempo para investigar el funcionamiento de todos los tipos de casos (array, arrayLike, nodeList, etc). He tomado la opción de utilizar un simple while y controlar en su interior si el tamaño del array que recorre ha variado respecto al inicial.

Creo que eso cubre todas las posibilidades de una forma sencilla. Pero no elegante, así que queda pendiente de investigación.

También queda pendiente si deben clonarse los nodos, ej.: $('.grupo').append('<p>nuevo elemento</p>'); colocará el párrafo que se cree en el primer elemento con la clase .grupo, ya que al ejecutar appendChild el párrafo cambia de padre y en la siguiente iteración no existe en el array en que fue creado originalmente. Aunque se pueda hacer clonar me parece una perversión, append lo entiendo como su traducción: adjuntar, y no acabo de ver ahí los clones.

códigoJavaScriptJaSpermeditación

José M. Carnero

Thursday 25 de May de 2017 (20:43)

PermURL: ../?entrada&ent=sobre_append_variantes_y_nodos

Comentarios

Sin resultados