Añadir contenido con “append()” y “appendTo()” de jQuery

En este artículo explicamos como añadir contenido a un elemento mediante las funciones "append()" y "appendTo()"

Como pudimos apreciar al poner en práctica lo explicado en el artículo anterior, el establecimiento de nuevo contenido en un elemento mediante jQuery es bastante sencillo y fácil de llevar a cabo, sin embargo el uso de funciones como “html()” y “text()” nos lleva a un reemplazo total de lo que ya se encuentra en el elemento es por ello que tenemos que recurrir a otra clase de comandos para poder lograr una adherencia a lo ya existente y no reemplazar todo.

Como es de esperarse, la adherencia mediante jQuery también resulta bastante sencilla, existen una serie de funciones que nos ayudan a agregar el nuevo contenido en la parte exacta donde deseemos, ya sea antes o después de ciertos elementos. En este artículo empezaremos con el análisis del primero de esos métodos el cual lleva por nombre “append()”.

Función Append de jQuery

Si lo que tú buscas es agregar nuevo contenido al final de un elemento sin modificar la información previamente desplegada, entonces este es el método que te va a ayudar a lograrlo.

Como ya mencionamos su función es muy sencilla, básicamente se encarga de agregar contenido al final del ya existente. Para llevar a cabo dicha adherencia, la función necesita que proporcionemos mediante parámetros el texto que se desea agregar, esto se debe hacer de manera obligatoria ya que sin parámetro no se puede lograr el resultado esperado.

Los parámetros que se proporcionan a la función pueden ser de distintos tipos, pero únicamente podemos enviar uno a la vez, ya sea una cadena, un elemento o conjunto envuelto previo. El tipo de parámetro variará según el enfoque del contenido del elemento, la versatilidad de esta función le permite aceptar cadenas simples, cadenas que contengan fragmentos de HTML, referencias a elementos DOM e incluso conjuntos de elementos envueltos, y una vez que son recibidos e interpretados el comando se encarga de fusionarlos dentro de los elementos que coincidan con el selector.

Consideremos un caso sencillo de adherencia para poder observar la aplicación de esta función en el código. Supongamos que deseamos agregar un nuevo párrafo dentro de un párrafo existente que lleva por id la cadena “parrafo_maestro”, para ello empleamos un selector que incluya únicamente a este párrafo y una vez envuelto aplicar la función de adherencia, la cual tendrá como parámetro la cadena con fragmento HTML que le dará la estructura y formato deseado:

2
jQuery('p#parrafo_maestro').append('<p><strong>texto de prueba</strong></p>');

Podemos darle un uso más complejo de este comando si lo que buscamos es identificar elementos ya existentes en el DOM y utilizarlos como las partes que van a ser adheridas al párrafo. Por ejemplo si tuviéramos un código como este:

jQuery("p#parrafo_maestro").append(jQuery("a.adhiereme"));

Esta declaración añade todos los vínculos que contengan la clase “adhiereme” al párrafo cuyo id es “parrafo_maestro”. La disposición de los elementos originales varia en función del número de elementos que sirven como objetivo de adherencia, ya que si hay un solo objetivo, el elemento se elimina de su ubicación original y se mueve hacia su nuevo padre, pero en caso de que existan varios objetivos, el elemento original permanece en su lugar y son copias de este las que se adjuntan.

También podemos hacer referencia a un determinado elemento del DOM, de la siguiente manera:

var elementoAdherir = jQuery("a.adhiereme")[0];
jQuery("p.parrafosMaestros").append(elementoAdherir);

Para determinar si el elemento identificado por la variable “elementoAdherir” se mueve o se copia, debemos conocer el número de elementos identificados por “jQuery(‘p.parrafosMaestros’)”. Será un movimiento si sólo existe un elemento y será una copia si hay más de uno que corresponda a ese selector.

Comando AppendTo de jQuery

Si lo que queremos es mover o copiar un elemento de un lugar a otro, un enfoque más sencillo para llevarlo a cabo es utilizar el comando “appendTo()”, que nos permite tomar un elemento y moverlo a algún otro lugar en el DOM de nuestra página.

Esta función se encarga de tomar todos los elementos que coinciden con el selector proporcionado a la función jQuery y colocarlos al final del contenido de los elementos que coinciden con el selector proporcionado como parámetro.

Su parámetro puede ser de dos tipos, una cadena que contenga un selector de jQuery o un elemento del DOM. Cada elemento del conjunto envuelto obtenido mediante el la función jQuery se añadirá a el lugar especificado mediante el parámetro, si más de un elemento coincide, el elemento se va a copiar y anexar a cada elemento que cumpla con el selector.

Por ejemplo si quisiéramos agregar al div “bebidas” todos los elementos que contengan la clase “frescas” debemos hacer algo como esto:

jQuery('.frescas').appendTo('#bebidas');

Conclusión

Como podemos observar el agregar nuevo contenido resulta bastante sencillo, hay que recordar que esto también nos va a ayudar para agregar elementos que hemos creado en “el aire” y que solo serán visibles una vez que utilicemos este comando. En el siguiente artículo analizaremos otras maneras de poder agregar contenido nuevo a elementos en distintas posiciones.