Aprenda a crear un elemento en jQuery

Aranzulla de Los Pobres

Crear un nuevo elemento es una de las tareas más básicas que puede realizar con la biblioteca jQuery JavaScript. Con jQuery, la tarea es mucho más simple que el enfoque equivalente con el Modelo de objetos de documento (DOM). También lo encontrará más flexible y expresivo cuanto más use jQuery.

Para cumplir un propósito, deberá poder agregar su elemento a una página web. Aprenda a agregar un nuevo elemento de lista o reemplazar un párrafo con contenido nuevo usando jQuery.

¿Qué es jQuery?

La biblioteca jQuery es una colección de código JavaScript con dos objetivos principales:

  • Simplifica las operaciones comunes de JavaScript.
  • Maneja problemas de JavaScript de compatibilidad cruzada entre varios navegadores.

El segundo objetivo se ocupa de los errores, pero también aborda las diferencias de implementación entre los navegadores. Ambos objetivos son menos necesarios de lo que solían ser, ya que los navegadores mejoran con el tiempo. Pero jQuery aún puede ser una herramienta valiosa.

¿Qué es un elemento?

En ocasiones, un elemento se denomina etiqueta. Aunque los dos a menudo se usan indistintamente, hay una sutil diferencia. Una etiqueta se refiere al <p> o </p> literal que incluye en un archivo HTML para marcar el contenido del texto. Un elemento es el objeto detrás de escena que representa el texto marcado. Piense en un elemento como la contraparte DOM de las etiquetas HTML.

Cómo crear un nuevo elemento usando jQuery

Como la mayoría de las operaciones de jQuery, la creación de un elemento comienza con la función dólar, $ () . Este es un atajo a la función principal de jQuery () . Esta función tiene tres propósitos distintos:

  • Coincide con elementos, generalmente los que ya existen en el documento
  • Crea nuevos elementos
  • Ejecuta una función de devolución de llamada cuando el DOM está listo

Cuando pasa una cadena que contiene HTML como primer parámetro, esta función creará un nuevo elemento:

 $("<a>")

Esto devuelve un objeto jQuery especial que contiene una colección de elementos. En este caso, hay un único objeto que representa un elemento "a" que acabamos de crear.

La cadena debe verse como HTML para distinguir esta acción de los elementos coincidentes. En la práctica, esto significa que la cadena debe comenzar con < . No puede agregar texto sin formato al documento con este método.

Es importante comprender que esto no agrega el elemento a su documento, solo crea un nuevo elemento listo para que lo agregue. El elemento está "desapegado", ocupando memoria, pero en realidad no forma parte de la página final, todavía.

Agregar HTML más complejo

La función dólar puede crear más de un elemento. De hecho, puede construir cualquier árbol de elementos HTML que desee:

 $("<ul><li>one</li><li>two</li><li>three</li></ul>")

También puede utilizar este formato para crear un elemento con atributos:

 $('<img src="photo.jpg" alt="my hometown" />')

Cómo establecer atributos en un elemento nuevo

Puede crear un nuevo elemento jQuery y establecer sus atributos sin tener que crear usted mismo la cadena HTML completa. Esto es útil si está generando valores de atributo de forma dinámica. Por ejemplo:

 photo = new Date().getHours() > 12 ? "afternoon.jpg" : "morning.jpg";
 $("<img>", { src: photo });

Cómo agregar un elemento

Una vez que haya creado un nuevo elemento, puede agregarlo al documento de varias formas diferentes. La documentación de jQuery reúne estos métodos bajo la categoría de 'manipulación' .

Agregar como hijo de un elemento existente

 $("body").append($("<p>Hello, world</p>"));
 $(document.body).append($el);

Puede utilizar este método, por ejemplo, para agregar un nuevo elemento de lista al final de una lista.

Agréguelo como hermano de un elemento existente

 $("p.last").after("<p>A new paragraph</p>")
 $("ul li:first").before("<li>new item</li>")

Esta es una buena opción si, por ejemplo, desea agregar un nuevo párrafo en medio de otros dos.

Reemplazar un elemento existente

Puede intercambiar un elemento existente por uno recién creado usando el método replaceWith () :

 $('#old').replaceWith("<p>New paragraph</p>");

Envolver alrededor de un elemento existente

Este es un caso de uso bastante raro, pero es posible que desee incluir un elemento existente en uno nuevo. Por ejemplo, es posible que tenga un elemento de código que desee incluir en un pre :

 $('code#n1').wrap("<pre>")

Acceder al elemento que ha creado

La función $ () devuelve un objeto jQuery. Esto es útil para operaciones de seguimiento:

 $el = $("p");
 $('body').append($el);

Tenga en cuenta que, por convención, los programadores de jQuery a menudo nombran las variables de jQuery con un signo de dólar inicial. Este es simplemente un esquema de nomenclatura y no está directamente relacionado con la función $ () .

Creando elementos usando jQuery

Aunque puede manipular el DOM utilizando funciones nativas de JavaScript, jQuery lo hace mucho más fácil. Aún es muy útil tener una buena comprensión del DOM, pero jQuery hace que trabajar con él sea mucho más agradable.