Aprenda a crear un elemento en jQuery

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 JavaScript código 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, existe una sutil diferencia. Una etiqueta se refiere al literal o

 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 el DOM contraparte 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 al núcleo jQuery () función. 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:

$("")

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

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

$("

uno
dos
Tres
")

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

$('')

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:

foto = nueva fecha (). getHours ()> 12? "tarde.jpg": "mañana.jpg";
$("", {src: foto});

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 el Categoría "manipulación".

Agregar como hijo de un elemento existente

$ ("cuerpo"). append ($ ("
Hola Mundo
"));
$ (documento.cuerpo) .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.último"). después ("
Un nuevo párrafo
")
$ ("ul li: primero"). antes ("
nuevo artículo
")

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 utilizando el reemplazar con() método:

$ ('# antiguo'). replaceWith ("
Nuevo párrafo
");

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, puede tener un código elemento que desea envolver en un pre:

$ ('código # n1'). wrap ("
")

Acceder al elemento que ha creado

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

$ el = $ ("p");
$ ('cuerpo'). 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 el $() 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.

El héroe oculto de los sitios web: comprensión del DOM

¿Está aprendiendo diseño web y necesita saber más sobre el modelo de objetos de documento? Esto es lo que necesita saber sobre DOM.

Leer siguiente

Sobre el Autor