Manipulación del DOM con jQuery - 2
Manipulación del DOM con jQuery - 2
Manipulación del DOM con jQuery - 2 es una lección gratuita de jQuery Academy en CoddyKit. Esta es la lección 1 de 1. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de jQuery Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de jQuery Academy incluye 1 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
Introducción y append
Hola:
En nuestros ejemplos hasta ahora, hemos realizado operaciones de actualización o lectura en objetos del DOM HTML.
Aprenderemos a insertar elementos con el método append().
Veamos un ejemplo.
<button id="add">
Add New Item
</button>
<div id="target"></div>
<script>
/*
Listen for an element with
the add id click
*/
$('#add').click(function(){
/*
append '<p>This is the appended
text</p>' to #target element
*/
$("#target").append("<p>Appended text</p>");
})
</script>append
Después de ejecutar el código anterior, el método append añadirá el código HTML (pasado como argumento) al final del elemento #test.
prepend
Método prepend()
El método prepend() es lo contrario del método append(). El método append() lo añade al final del contenido del elemento de destino, mientras que prepend lo añade al principio.
<div id="target"></div>
<button id="add">
Add New Item
</button>
<script>
/*
Listen for an element
with the add id click
*/
$('#add').click(function(){
/* append '<p>This is the prepended text</p>'
to #target element
*/
$("#target").prepend("<p>This is the appended text</p>");
})
</script>Pregunta
Con los métodos append y prepend, pudimos añadir nuevos elementos HTML al final y al principio del elemento de destino.
Entonces, ¿cómo lo hacemos si queremos añadirlo como hermano del elemento de destino?
Ejemplo
Continuemos con el ejemplo anterior.
Nuestro nodo HTML en el primer caso es el siguiente.
<div id="test">
<p>initial paragraph</p>
</div>Métodos after y before
Métodos after() y before()
Podemos añadir elementos HTML antes y después del elemento de destino con los métodos after() y before() .
En el código de ejemplo siguiente, se ha añadido un elemento nuevo al elemento con el id #test justo antes y justo después de él en la jerarquía de elementos hermanos.
<div id="test">
<p>initial paragraph</p>
</div>
<script>
$('#test').before('<p>I am before the #test element</p>');
$('#test').after('<p>I am after the #test element</p>');
</script>
Inserción múltiple
Hasta ahora, hemos visto los métodos prepend(), append(), before() y after(). Olvidé explicar un tema. Lo siento, a veces puedo ser olvidadizo 😇.
Entonces, ¿qué hacemos si queremos añadir más de un nodo al mismo tiempo?
Como en el ejemplo siguiente,
podemos añadir más de un nodo al mismo tiempo pasando más de un argumento a los métodos correspondientes.
<p>
<span id="target"></span>
</p>
<script>
var firstNode = '<p id="first-node">First node</p>';
var secondNode = '<p id="first-node">Second node</p>';
var thirdNode = '<p id="first-node">Third node</p>';
/*
The following four methods work
with the same logic and take
more than one argument.
*/
$('#target').before(firstNode, secondNode, thirdNode);
$('#target').after(firstNode, secondNode, thirdNode);
$('#target').append(firstNode, secondNode, thirdNode);
$('#target').prepend(firstNode, secondNode, thirdNode);
</script>Ejemplo de encadenamiento
En el ejemplo anterior, se ha añadido más de un nodo al mismo tiempo. Como puede ver, la sintaxis será la misma aunque se utilicen métodos diferentes.
Además, podemos escribir código en JQuery mediante el encadenamiento.
De esta forma, podemos escribir código más corto y eficaz.
Veamos el ejemplo y aprendamos a escribir código encadenado en jQuery.
<p id="test"></p>
<script>
var firstNode = '<p id="first-node">First node</p>';
var secondNode = '<p id="first-node">Second node</p>';
var thirdNode = '<p id="first-node">Third node</p>';
/*
We made our code shorter.
Also, we have done the select operation
on the DOM only once instead of twice.
*/
$('#test').before(firstNode, secondNode, thirdNode)
.after(firstNode, secondNode, thirdNode);
</script>Método wrap
Método wrap()
¿Qué método utilizaremos si queremos colocar el elemento HTML dentro de otro contenedor?
Por supuesto, el método wrap().
El ejemplo siguiente muestra un uso sencillo del método wrap.
<div id="target"></div>
<script>
/*
When we apply the code below.
The node we assigned as an argument
will come around our target element.
*/
$("#target").wrap('<div class="container">Container wrapped the target element</div>');
//The result will be as follows
/*
<div class="container">
Container wrapper the target element
<div id="target">
</div>
</div>
*/
</script>
Question
Método unwrap
Método unwrap()
Tenemos el método opuesto a wrap(). Con el método unwrap(), podemos eliminar el elemento padre de un elemento de destino.
const $ = (selector) => ({
unwrap: () => console.log(`Unwrapped ${selector}`)
});
$("#target").unwrap();Método empty
Método empty()
Veamos cómo eliminar contenido de los elementos HTML.
Con el método empty(), podemos eliminar todos los elementos hijos y descendientes de un elemento de destino.
// Removes all descendants of the element from the DOM.
// (Simulated for Node.js environment)
const $ = (selector) => ({
empty: () => console.log(`Removed all descendants of ${selector}`)
});
$("#target").empty();Método remove()
Método remove()
El método remove() elimina del DOM no solo los descendientes del elemento, sino también el propio elemento.
/*
Removes the element and
all descendants of the element from the DOM.
*/
$('#target').remove();Felicitaciones
Felicitaciones 🎉
Hemos aprendido las manipulaciones del DOM.
En la siguiente sección, aprenderemos a aplicar estilos con jQuery.
Preguntas frecuentes
¿La lección «Manipulación del DOM con jQuery - 2» es gratis?
Sí — el texto completo de «Manipulación del DOM con jQuery - 2» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de jQuery Academy, actualiza a CoddyKit PRO. El curso de jQuery Academy incluye 1 lecciones en total.
¿Qué aprenderé en «Manipulación del DOM con jQuery - 2»?
Manipulación del DOM con jQuery - 2 Practicas jQuery Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar jQuery Academy?
No se requiere experiencia previa. jQuery Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 1.
¿Cuánto tiempo toma la lección «Manipulación del DOM con jQuery - 2»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de jQuery Academy?
Sí. Cada lección de jQuery Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.