Manipulations du DOM avec jQuery - 2
Manipulations du DOM avec jQuery - 2
Manipulations du DOM avec jQuery - 2 est une leçon jQuery Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 1. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage jQuery Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours jQuery Academy comprend 1 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
Introduction et append
Bonjour,
Dans nos exemples précédents, nous avons effectué une opération de mise à jour ou de lecture sur des objets du DOM HTML.
Nous allons apprendre l’opération d’insertion avec la méthode append().
Examinons un exemple.
<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
Après l’exécution du code ci-dessus, la méthode append ajoute le code HTML (transmis comme argument) à la fin de l’élément #test.
prepend
Méthode prepend()
L’opposé de la méthode append() est la méthode prepend() . La méthode append() ajoute le contenu à la fin du contenu de l’élément cible, tandis que prepend l’ajoute au début.
<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>question
Grâce aux méthodes append et prepend, nous pouvions ajouter de nouveaux éléments HTML à la fin et au début de l'élément cible.
Mais comment faire si nous voulons l'ajouter comme élément frère de l'élément cible ?
exemple
Poursuivons l'exemple précédent.
Dans le premier cas, notre nœud HTML est le suivant.
<div id="test">
<p>initial paragraph</p>
</div>méthodes after - before
méthodes after() et before()
Nous pouvons ajouter des éléments HTML avant et après l'élément cible avec les méthodes after() et before() .
Dans le code de l'exemple ci-dessous, un nouvel élément a été ajouté à l'élément dont l'identifiant est #test, juste avant et juste après celui-ci dans la hiérarchie des éléments frères.
<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>
Insertion multiple
Jusqu’à présent, nous avons vu les méthodes prepend(), append(), before() et after(). J’ai oublié d’expliquer un point. Désolé, il m’arrive parfois d’être distrait 😇.
Alors, que faire si nous voulons ajouter plusieurs nœuds en même temps ?
Comme dans l’exemple ci-dessous,
nous pouvons ajouter plusieurs nœuds en même temps en transmettant plusieurs arguments aux méthodes concernées.
<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>Exemple d’enchaînement
Dans l’exemple ci-dessus, plusieurs nœuds ont été ajoutés en même temps. Comme vous pouvez le constater, la syntaxe reste la même, même si les méthodes sont différentes.
Par ailleurs, nous pouvons écrire du code avec jQuery en le modifiant.
De cette manière, nous pouvons écrire un code plus court et plus efficace.
Examinons l’exemple et apprenons à écrire du code enchaîné avec 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éthode wrap
méthode wrap()
Quelle méthode utiliserons-nous si nous voulons placer l'élément HTML dans un autre conteneur ?
Bien sûr, la méthode wrap() .
L'exemple suivant montre une utilisation simple de la méthode 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éthode unwrap
méthode unwrap()
Nous disposons de la méthode opposée à la méthode wrap(). Avec la méthode unwrap(), nous pouvons supprimer l'élément parent d'un élément cible.
const $ = (selector) => ({
unwrap: () => console.log(`Unwrapped ${selector}`)
});
$("#target").unwrap();méthode empty
méthode empty()
Examinons la suppression dans les éléments HTML.
Avec la méthode empty(), nous pouvons supprimer tous les éléments enfants et descendants d'un élément cible.
// 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éthode remove()
La méthode remove() supprime du DOM non seulement les descendants de l'élément, mais également l'élément lui-même.
/*
Removes the element and
all descendants of the element from the DOM.
*/
$('#target').remove();Félicitations
Félicitations 🎉
Nous avons appris à manipuler le DOM.
Dans la prochaine section, nous apprendrons à appliquer des styles avec jQuery.
Apprends JavaScript avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 22
- Leçons
- 48
Questions Fréquemment Posées
La leçon « Manipulations du DOM avec jQuery - 2 » est-elle gratuite ?
Oui — le texte complet de « Manipulations du DOM avec jQuery - 2 » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours jQuery Academy, passe à CoddyKit PRO. Le cours jQuery Academy comprend 1 leçons au total.
Qu'est-ce que j'apprendrai dans « Manipulations du DOM avec jQuery - 2 » ?
Manipulations du DOM avec jQuery - 2 Tu pratiques jQuery Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer jQuery Academy ?
Aucune expérience préalable n'est requise. jQuery Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 1.
Combien de temps prend la leçon « Manipulations du DOM avec jQuery - 2 » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon jQuery Academy ?
Oui. Chaque leçon jQuery Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.