• 10 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Manipuler le contenu

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Ce chapitre vous présentera les différentes méthodes qui permettent de manipuler le contenu de votre page. Que ce soit du plus simple, à ce qui aurait pris des dizaines de lignes en JavaScript.

Ainsi, vous serez capables de récupérer le contenu textuel d'un élément, de modifier son code HTML, de lui ajouter un autre élément avant ou après, de lui incorporer un autre élément, de l'envelopper d'un autre élément, ainsi que de le copier, de le supprimer ou de le vider.

Contenu textuel

Méthode text()

Vous connaissez déjà html(), qui permet de remplacer le contenu d'un élément. Eh bien voici text(), qui manipule le contenu comme du texte et non comme des balises :

  • changer le contenu avec text('contenu') : les chevrons < et > sont convertis en entités HTML : &lt; et &gt; respectivement (les balises ne sont donc plus actives) ;

  • récupérer le contenu avec text() : renvoie le contenu « textuel » (pas les balises), les entités HTML étant converties en caractères.

C'est l'équivalent en JavaScript classique de la propriété textContent.

Comparaison de text() avec html()

Récupérer le contenu
<p id="premier">
  <span class="texte">
    Salut tout le monde
  </span>
  <img src="photo_1.jpg" alt="Premiere Photo !" />
</p>
$('#premier').text()

renvoie "Salut tout le monde" (avec tous les retours à la ligne et les espaces).

Alors que $('#premier').html() renvoie :

<span class="texte">
    Salut tout le monde
  </span>
  <img src="photo_1.jpg" alt="Premiere Photo !" />
Définir le contenu

Et lorsque l'on passe du texte en paramètre : $('#premier').text('<strong>les pommes</strong>') change le contenu du paragraphe en

&lt;strong&gt;les pommes&lt;/strong&gt;

Alors que $('#premier').html('<strong>les pommes</strong>') ajoute une balise <strong>les pommes</strong> .

Cliquez en haut sur "Essayez ce code !" pour voir les différences entre html() et text().

Cas spécial : titre du document

On ne peut pas changer le titre du document avec html() ou text(), parce que utiliser ces méthodes changera le contenu HTML de la balise title mais en aucun cas ne changera le titre tel qu'on le voit en haut de votre onglet ou fenêtre.

Plusieurs emplois de text()

Cela renvoie du code HTML avec les balises actives. Par exemple :

$('balise1').html(
  $('balise2')
    .text('<strong>les pommes</strong>')
    .text()
);

balise1 contient alors en gras "les pommes".

La méthode text(), pour définir le contenu d'un élément, vous garantit qu'il n'y aura pas de balises actives dans cet élément.
Maintenant dans ce cas, on a utilisé html() pour définir le contenu.

Remplacer la balise

Première méthode

Les méthodes html() et text() permettent de changer le contenu : replaceWith() est une méthode qui permet de remplacer la balise et son contenu. On peut lui passer du code html ou encore un objet jQuery qui viendra remplacer l'élément en question.

Ainsi faire $('div').replaceWith('<span>Salut!</span>') transformera <div>Bonsoir.. :)</div> en <span>Salut!</span>.

// Remplace les liens <a>...</a> par <em>censuré</em>.
$('a').replaceWith('<em>censuré</em>');
$('h1').replaceWith($('.titre:first'));
$('#titre').replaceWith('<h1>'+$('#titre').html()+'</h1>');
$('.recherche').replaceWith('<a href="http://google.com">Google</a>');

Seconde méthode

La méthode replaceAll() permet de faire l'opération inverse. On peut lui passer un objet jQuery mais encore une expression (comme ce qu'on met dans la fonction principale).

// Tous les <h1> vont être remplacés.
$('#titre').replaceAll($('h1'));
// Revient à faire :
$('#titre').replaceAll('h1');

Essayez de bien comprendre quelle est l'utilité de la dernière méthode par rapport à la première. Et surtout comment elle s'utilise.
Le même genre de méthode va apparaître dans le sous-chapitre suivant ;) .

Insertion à l'intérieur et à l'extérieur

Insérer à l'intérieur avec prepend() et append()

Qu'est-ce qu'insérer à l'intérieur ?

Les méthodes html() et text() réécrivent le contenu d'un élément : c'est-à-dire qu'elles les vident dans un premier temps, puis y écrivent.

Les méthodes prepend() et append() permettent d'ajouter du contenu à celui existant : prepend() avant et append() après :

  1. $('span').prepend('balise span » ') transformera <span>Hello World !</span> en <span>balise span » Hello World !</span>.

  2. $('span').append(' « balise span') transformera <span>Hello World !</span> en <span>Hello World ! « balise span</span>.

On peut aussi passer un objet jQuery (tous les éléments contenus dans ce dernier seront insérés) en paramètre :

$('a').prepend('Lien : ');
$('h1:first').prepend('Premier titre : ');
$('q').append(" (c'était une citation)");
$('#titre').append($('#sommaire'));
$('#basdepage').prepend($('h1'));

Tout simplement !

prependTo() et appendTo()

Il existe aussi deux autres méthodes, prependTo() / appendTo(), qui permettent l'opération inverse :

Le premier argument de prependTo() / appendTo() peut être soit une chaîne de caractères, représentant un sélecteur, soit un objet jQuery (retourné par $()).

Pour ce code : <span id="nonosse">Nonosse...</span> <div id="chien">Chien !!!</div>, tous ces codes reviennent au même, sauf le dernier car la balise #nonosse n'est pas déplacée :

$('#nonosse').appendTo('#chien');
// Revient à faire :
$('#nonosse').appendTo($('#chien'));
// Ou alors :
$('#chien').append($('#nonosse'));

// Ou alors directement en prenant le texte.
$('#chien').append('Nonosse...');

Mais on peut aussi faire plus en créant des balises :

$('#contenu p.message_forum').prepend('<em>message du forum : </em>');
$('#contenu a').append('<span title="avertir">avertissez les liens morts !</span>');
$('#contenu').append('<div id="basdepage">Tout contenu est sous CC BY.</em>');

Insérer à l'extérieur avec before() et after()

Les méthodes append() / prepend() / appendTo() / prependTo() changent le contenu à l'intérieur, c'est à dire que faire $('p').prepend('Paragraphe : ') dans <p>Comment tu vas ?</p>, change le paragraphe en : <p>Paragraphe : Comment tu vas ?</p>.

Les méthodes after() / before() / insertAfter() / insertBefore() sont les équivalents de ces méthodes, à l'exception qu'elles ajoutent à l'extérieur des balises. Elles fonctionnent donc de la même manière : on passe en argument un objet jQuery ou du contenu html à after() / before() et un sélecteur jQuery ou un objet jQuery à insertAfter() / insertBefore().

Donc si on fait :

$('p').before('Paragraphe : ')
<p>Comment tu vas ?</p>

, le code HTML deviendra :

Paragraphe : <p>Comment tu vas ?</p>
// Tout ce qui suit revient au même :
$('#titre').insertBefore('h1:first');
$('#titre').insertBefore($('h1:first'));
$('h1:first').insertAfter($('#titre'));
$('h1:first').insertAfter('#titre');
$('h1:first').before($('#titre'));
$('#titre').after($('h1:first'));

L'ajout à l’extérieur de la balise ne modifie pas la balise en elle même, mais sa balise parente.

Résumé

Vous avez appris pas moins de 8 méthodes dans ce sous chapitre o_O .
Mais ne vous inquiétez pas, en réalité, elles servent presque tous à la même chose.

Pour résumer, voici ce qu'il faut retenir sur ces méthodes :

  1. prepend() et append() permettent d'ajouter un élément ou du texte à l'intérieur de la balise.

  2. before() et after() permettent d'ajouter un élément ou du texte à l'extérieur de la balise.

  3. prepend() et before() ajoutent un élément ou du texte avant le contenu de la balise en question.

  4. append() et after() ajoutent un élément ou du texte après le contenu de la balise en question.

  5. Ces quatre méthodes ont respectivement quatre méthodes équivalentes, qui permettent de réaliser la même chose, mais s'employant différemment. Ainsi :

    • A.prepend(B) revient au même que B.prependTo(A).

    • A.append(B) revient au même que B.appendTo(A).

    • A.before(B) revient au même que B.insertBefore(A).

    • A.after(B) revient au même que B.insertAfter(A).

  6. Ces quatre méthodes équivalentes ne s'utilisent pas sur des chaînes de caractères. Elles s'utilisent exclusivement sur des objets jQuery.

  7. L'argument de ces méthodes peut être un sélecteur jQuery, du code HTML, ou plus généralement un objet jQuery. Pour rappel, c'est une collection d'éléments de la page. Faites donc attention si il y a plusieurs éléments, le comportement de la méthode peut changer.

Image utilisateur

Insérer à l'intérieur et à l'extérieur

N'hésitez pas à vous reporter à ce petit résumé de temps en temps ^^ .

Envelopper

Les méthodes ci-dessous prendront en argument soit un objet jQuery, soit du contenu HTML.

Envelopper à l'extérieur

wrap() permet d'« envelopper » n'importe quel élément entre deux balises. Le plus simple est de lui passer une balise ouvrante et une fermante sans contenu (<em></em> par exemple).
$('span').wrap('<b></b>') transformera <span>Hello World !</span> en <b><span>Hello World !</span></b>

$('#titre').wrap('<h1></h1>');
$('.desactiver').wrap('<pre></pre>');
// Le contenu sera entre les <div></div>.
$('.contenu').wrap('<em>le contenu</em> ira là : <div></div> mais pas <strong>là</strong>');
// Le contenu sera entre les <em></em> mais aussi les <q></q>.
$('span').wrap('<em id="ici"></em> et là <q></q>');

Envelopper à l'intérieur

wrapInner() fontionne de la même manière mais entoure le contenu. Tout comme avec wrap(), le contenu est dupliqué dans chacun des couples de balises ouvrantes / fermantes sans contenu.
$('span').wrapInner('<b></b>') transformera <span>Hello World !</span> en <span><b>Hello World !</b></span>

$('span.italique').wrapInner('<i></i>');
$('h1:first').wrapInner('<a href="http://google.com"></a>');
$('a').wrapInner('<em>Ceci est un lien : </em><u></u>');

Tout envelopper

wrapAll() est similaire à wrap() à l'exception que si ce dernier enveloppe chaque élément un par un, wrapAll() enveloppe tous les éléments d'un coup.

Et si les éléments ne se trouvent pas côte à côte ?

La méthode va tout simplement placer tous les éléments à la suite les uns des autres.

$('input.premierFormulaire').wrapAll('<form></form>');
$('q').wrapAll('<div class="groupeDeCitations"></div>');

Déballer

unwrap() est une méthode permettant de « désenvelopper » (ou déballer) un élément. C'est-à-dire enlever la balise parent qui l'enveloppe.
C'est un peu la méthode inverse de wrap() !

Par exemple $('b > span').unwrap(); sur <p>Hello <b>Wor<span>ld</span></b></p> donne <p>Hello Wor<span>ld</span></p> .

Copier, supprimer et vider

Copier des éléments

clone() permet de copier des éléments (de les « cloner »), avec leur contenu, leurs attributs et valeurs (donc par conséquent les événements comme onclick etc.).
clone() va simplement renvoyer un objet jQuery qui est une copie de l'original, mais il ne va pas l'ajouter à votre page web.

// Multiplie le nombre de boutons par 2.
$('button').clone().appendTo($('body'));
// Revient à faire :
$('body').append($('button').clone());

Supprimer des éléments

remove() permet de supprimer des éléments de la page web. On peut lui passer un argument qui représente un sélecteur jQuery : il désignera les éléments qui doivent être supprimés parmi tous les éléments contenus dans l'objet jQuery.

// Supprime les liens de la page ayant la classe "sites".
$('a').remove('.sites');
// Supprime les balises <strong> dans des <button>.
$('button strong').remove();

Vider des éléments

empty() permet de vider le contenu de l'élément en question :

$('button').empty(); // Vide les boutons.
$('body').empty(); // Vide la page web.
// Revient à faire :
$('body').html('');

TP : Condensé

Cahier des charges

Le but sera de manipuler du contenu ( :-° ) en partant de ce bout de page HTML :

<p id="contenu"> 
  Lorem <span class="vert">ipsum dolor</span> sit amet, <span class="titre2"> 
  consectetur adipiscing elit</span>.Etiam <a href="#">facilisis</a>  
  <span class="rouge">ultrices</span> dolor, eu <span class="orange">fermentum 
   eros</span> aliquet ac. Aenean varius <span class="titre2">ultrices nisi 
  </span> vel aliquet. Nam eu viverra sem. <span class="gras">Fusce facilisis 
  </span> eros ac <span class="titre1">elit scelerisque molestie</span>. Morbi 
   lacus orci, interdum ac <span class="souligne">faucibus hendrerit</span>, 
   <span class="barre">facilisis vel</span> nunc. <span class="souligne">Sed in 
  </span> <span class="bleu">mauris</span> <span class="gras">lorem</span>.  
  Integer facilisis, <span class="italique">augue et suscipit</span> molestie, 
   <span class="barre">lectus lectus</span> pellentesque mi, <span class="vert"> 
  at</span> condimentum <span class="italique">nulla</span> nibh ut turpis. <span> 
  Cum sociis</span> natoque <span class="vert">penatibus et magnis</span> dis  
  <a href="#">parturient montes</a>, nascetur ridiculus mus. Etiam quis nisl  
  metus.<span class="vert">Phasellus</span>ullamcorper posuere augue quis placerat.  
  <span class="titre1">Duis sed quam</span>odio. Donec <span class="vert">aliquam 
   metus</span> a <a href="#">ligula lacinia</a> a tempor leo <span class="bleu">imperdiet</span>. 
   Cras augue purus, <span class="souligne">lobortis eu</span> scelerisque sed, 
   <span class="vert">venenatis ut</span> turpis. Donec <span class="bleu">quis 
   magna sapien</span>. Ut ut diam arcu. <span class="souligne">Suspendisse nec 
   risus</span> id lacus venenatis <a href="#">rhoncus.</a> In vitae  
  <span class="vert">justo tellus</span>, <span class="bleu">vitae lacinia nunc 
  </span>. Aliquam <span class="italique">erat</span> <span class="rouge">volutpat.</span> 
</p>

Un paragraphe repéré par un id est rempli de texte avec certaines parties entourées de <span> avec des classes différentes (vert, titre1, titre2, rouge, italique, gras, souligne). Il y a aussi des balises liens <a> .

Puis l'utilisateur va pouvoir agir sur la page grâce à des boutons : <button onclick="fonctionJs()">Cliquez ici</button> .

Vous pouvez attribuer les fonctionnalités que vous voulez aux boutons, mais en voici quelques-unes que je vous propose :

  • enlever les liens ;

  • enlever le texte en gras ;

  • enlever le texte en italique ;

  • enlever le texte décoré ;

  • vider les boutons ;

  • voir le code ;

  • transformer les liens en boutons ;

  • dupliquer le texte ;

  • regrouper les liens ;

  • mettre des titres ;

  • regrouper les titres ;

  • colorer le texte ;

  • organiser sémantiquement le texte ;

Essayez d'en faire un maximum et de faire vos propres fonctions, vous pouvez aussi ajouter du contenu à la page, mais aussi prendre le code d'une page d'un site connu, pour ensuite "jouer" avec.

Aide

Si vous ne voyez pas du tout par où commencer, je vous conseille tout d'abord d'écrire la page HTML (sans code JavaScript) en ajoutant les boutons, et le code de base.
Puis ajoutez les événements onclick à chaque bouton qui appelle une fonction JavaScript.
Puis écrivez une à une, tout doucement, les fonctions JavaScript.

Solution

N'oubliez pas que :

Citation

C'est en s'entraînant que l'on apprend.

Voici une solution possible : ce n'est pas parce que votre code est différent qu'il est faux, ni moins bien.

Tout d'abord, voici le code HTML sans le code cité précédemment :

<button onclick="semantique()">Organiser sémantiquement le texte</button> 
<button onclick="colorer()">Colorer le texte</button> 
<button onclick="mettreTitres()">Mettre des titres</button> 
<button onclick="liensEnBoutons()">Transformer les liens en boutons</button> 
<button onclick="dupliquerTexte()">Dupliquer le texte</button> 
<button onclick="regrouperTitres()">Regrouper les titres</button> 
<button onclick="regrouperLiens()">Regrouper les liens</button> 
<button onclick="viderBoutons()">Vider les boutons</button> 
<button onclick="enleverLiens()">Enlever les liens</button> 
<button onclick="enleverGras()">Enlever le texte en gras</button> 
<button onclick="enleverItalique()">Enlever le texte en italique</button> 
<button onclick="enleverDecor()">Enlever le texte décoré</button> 
<button onclick="voirCode()">Voir le code</button>
function enleverLiens() {
  $('#contenu a').remove();
}

function enleverGras() {
  $('#contenu strong,#contenu b').remove();
}

function enleverItalique() { 
  $('#contenu em,#contenu i').remove(); 
}

function enleverDecor() { 
  $('#contenu *:not(html):not(body):not(p):not(button)').remove(); 
}

function viderBoutons() {
  $('#contenu button').empty();
}

function voirCode() {
  $('#contenu p').text($('p').html());
}

function liensEnBoutons() {
  $('#contenu a').wrap('<button></button>');
}

function dupliquerTexte() {
  $('#contenu p').clone().appendTo('#contenu');
}

function regrouperLiens() {
  $('#contenu a').wrapAll('<div></div>');
}

function mettreTitres() {
  $('#contenu .titre1').wrap('<h1></h1>');
  $('#contenu .titre2').wrap('<h2></h2>');
}

function regrouperTitres() {
  $('h1').wrapAll('<div></div>');
  $('h2').wrapAll('<div></div>');
}

function colorer() {
  $('#contenu .rouge').wrap('<span style="color:red"></span>');
  $('#contenu .vert').wrap('<span style="color:green"></span>');
  $('#contenu .orange').wrap('<span style="color:orange"></span>');
  $('#contenu .bleu').wrap('<span style="color:blue"></span>');
}

function semantique() {
  $('#contenu .italique').wrap('<i></i>');
  $('#contenu .gras').wrap('<b></b>');
  $('#contenu .souligne').wrap('<u></u>');
  $('#contenu .barre').wrap('<del></del>');
}

Voilà, relisez bien pour voir ce que vous n'avez pas compris, mais normalement c'était juste pour vous faire retenir les fonctions de ce chapitre ;) .

Pour les plus feignants d'entre vous, vous pouvez tester le code.

Note

Vous verrez plus tard comment créer des événements avec jQuery. Pour l'instant, vous ferez comme dans ce TP, avec des boutons et des attributs onclick.

  1. La méthode text() vous garantit qu'il n'y a aucune balise active insérée dans la page web, et ne renvoi pas les chevrons des balises (mais des entités HTML à la place) ;

  2. Si vous avez un oubli, reportez-vous au résumé de la fin du troisième sous-chapitre pour les méthodes d'insertion à l'intérieur et à l'extérieur ;

  3. Vous avez appris beaucoup de méthodes dans ce chapitre, mais la plupart d'entre elles reviennent à faire la même chose.
    Certaines méthodes ont des méthodes équivalentes : A.methode(B) <=> B.methodeEquivalente(A).

  4. N'oubliez pas l'ambiguïté des arguments chaînes de caractères dans certaines méthodes jQuery, surtout celles apprises dans ce chapitre, qui sont soit des sélecteurs (des expressions comme quand on appelle la fonction principale), soit du contenu à insérer.

Appris dans ce chapitre : comparaison html() / text(), récupérer le titre du document, méthodes : text(), replaceWith(), replaceAll(), prepend(), append(), prependTo(), appendTo(), after(), before(), insertArter(), insertBefore(), wrap(), unwrap(), wrapInner(), wrapAll(), clone(), remove(), empty().

Exemple de certificat de réussite
Exemple de certificat de réussite