Manipulation du contenu HTML avec jQuery 2-3

• La méthode prepend() permet d’insérer le contenu spécifié par le paramètre, au début de chaque élément dans l’ensemble des éléments correspondants.
• La méthode prepend() insère le contenu spécifié au début des éléments sélectionnés.
• Syntaxe: $(selector).prepend(content,function(index,html))

• Les deux méthodes jQuery prepend() et prependTo() effectuent la même tâche, ajoutent un contenu texte ou HTML avant le contenu des éléments correspondants.
• La principale différence réside dans la syntaxe.
• Par exemple (Application M02)
• $('.idDiv').prepend("<div class='idDivNew'>Nouvelle boite crée avec <b>prepend</b></div>");
• $("<div class='idDivNew'>Nouvelle boite crée avec <b>prependTo</b></div>").prependTo('.idDiv');
• Les deux méthodes ci-dessus exécutent la même tâche, mais avec une syntaxe différente, le nouveau contenu après prepend() ou prependTo() deviendra



• Vous trouverez le code complet ici : Application M02

• La méthode append() insère le contenu spécifié à la fin des éléments sélectionnés.
• La méthode append() permet d’insérer le contenu spécifié à la fin de l’élément sélectionné en utilisant une fonction.
• Syntaxe: $(selector).append(function(index,html))
• Exemple:

• La méthode appendTo() insère le contenu spécifié à la fin des éléments sélectionnés.
• appendTo(): insère le contenu, spécifié par le paramètre, à la fin de chaque élément dans l’ensemble des éléments correspondants.
• Syntaxe: $(contenu).appendTo(selecteur)
• Exemple:

• Les deux méthodes jQuery append() et appendTo() effectuent la même tâche, ajoutent un contenu textuel ou HTML après le contenu des éléments correspondants.
• La principale différence réside dans la syntaxe.
• Par exemple (Application M01)
• $('.idDiv').append("<div class='idDivNew'>Nouvelle boite crée avec <b>append</b></div>");
• $("<div class='idDivNew'>Nouvelle boite crée avec <b>appendTo</b></div>").appendTo('.idDiv');
• Les deux méthodes ci-dessus exécutent la même tâche, mais avec une syntaxe différente, le nouveau contenu après append() ou appendTo() deviendra



• Vous trouverez le code complet ici : Application M01

• La méthode before() insère le contenu spécifié avant l’élément sélectionné.
• Syntaxe: $(sélecteur).before(contenu)
• Exemple:
• $('.idDiv').before("<div class='idDivNew'>Nouvelle boite crée avec <b>Before</b></div>");

• La méthode before() insère le contenu spécifié avant la cible.
• Syntaxe: $(sélecteur).insertbefore(contenu)
• Exemple:
• $("<div class='idDivNew'>Nouvelle boite crée avec <b>InsertBefore</b></div>").insertBefore('.idDiv');

• Les deux méthodes jQuery before() et insertBefore() effectuent la même tâche, ajoutent un contenu texte ou HTML avant les éléments correspondants.
• La principale différence réside dans la syntaxe.
• Par exemple (Application M03)
• $('.idDiv').before("<div class='idDivNew'>Nouvelle boite crée avec <b>before</b></div>");
• $("<div class='idDivNew'>Nouvelle boite crée avec <b>insertBefore</b></div>").insertBefore('.idDiv');
• Les deux méthodes ci-dessus exécutent la même tâche, mais avec une syntaxe différente, le nouveau contenu après before() ou insertBefore() deviendra



• Vous trouverez le code complet ici : Application M03

• Les deux méthodes jQuery after() et insertAfter() effectuent la même tâche, ajoutent un contenu texte ou HTML après les éléments correspondants.
• La principale différence réside dans la syntaxe.
• Par exemple (Application M04)
• $('.idDiv').after("<div class='idDivNew'>Nouvelle boite crée avec <b>after</b></div>");
• $("<div class='idDivNew'>Nouvelle boite crée avec <b>insertAfter</b></div>").insertAfter('.idDiv');
• Les deux méthodes ci-dessus exécutent la même tâche, mais avec une syntaxe différente, le nouveau contenu après after() ou insertAfter() deviendra



• Vous trouverez le code complet ici : Application M04

• insère le contenu HTML spécifié autour de chaque élément correspondant.

• utilisé pour spécifier quel élément sera enroulé autour de l’élément sélectionné.
• Obligatoire
• Valeurs possibles:
• Sélecteur
• Chaîne HTML
• Élément
• Objet jQuery

<script>
 $(document).ready(function() {
   $("button").click(function() {
     $("p").wrapAll("<div></div>");
   });
 });
</script>

1. $('h2').prepend('> ');
2. Solution
3. $('p').append('<hr>');
4. $('#titre3').before('<hr>');
5. $('h2').append(' ###');
6. $('h2').prepend(' ###');
7. $('hr').after('<br><br>');
8. $('hr').replaceWith('<br>');
9. $('h2').each(function(){
var elemH2 = $(this);
elemH2.replaceWith('<h3>' + elemH2.text() + '</h3>');
});
10. $("p").add("Exercices").appendTo( document.body );