Médiaforma

jQuery – Insérer du contenu dans le DOM

Print Friendly

Commencez par saisir ce code et sauvegardez-le sous le nom inserer-contenu.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Insertion de contenu dans le DOM</title>
    <script src="jquery.js"></script>
  </head>
  <body>
    <h2>Partie 1</h2>
    <p>Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.</p>
    <p>Accedat huc suavitas quaedam oportet sermonum atque morum, haudquaquam mediocre condimentum amicitiae. Tristitia autem et in omni re severitas habet illa quidem gravitatem, sed amicitia remissior esse debet et liberior et dulcior et ad omnem comitatem facilitatemque proclivior.</p>
    <p>Illud autem non dubitatur quod cum esset aliquando virtutum omnium domicilium Roma, ingenuos advenas plerique nobilium, ut Homerici bacarum suavitate Lotophagi, humanitatis multiformibus officiis retentabant.</p>
    <h2>Partie 2</h2>
    <p>Illud autem non dubitatur quod cum esset aliquando virtutum omnium domicilium Roma, ingenuos advenas plerique nobilium, ut Homerici bacarum suavitate Lotophagi, humanitatis multiformibus officiis retentabant.</p>
    <p>Eodem tempore etiam Hymetii praeclarae indolis viri negotium est actitatum, cuius hunc novimus esse textum. cum Africam pro consule regeret Carthaginiensibus victus inopia iam lassatis, ex horreis Romano populo destinatis frumentum dedit, pauloque postea cum provenisset segetum copia, integre sine ulla restituit mora.</p>

    <script>
    </script>
  </body>
</html>

 

Remarque

Le texte des paragraphes est issu du site http://www.faux-texte.com/.

 

Pour altérer le contenu d’un objet texte jQuery, vous utiliserez la méthode text(). Par exemple, pour modifier tous les titres h2 d’un document en « Ceci est un titre h2 », vous utiliserez cette instruction :

$('h2').text('Ceci est un titre h2');

 

Faites un essai dans ce document :

 

Vous pouvez également insérer du contenu avant ou après un objet jQuery en utilisant les méthodes suivantes :

  • append() insère du contenu à la fin de la sélection
  • prepend() insère du contenu au début de la sélection
  • before() insère du contenu avant la sélection
  • after() insère du contenu après la sélection

 

Exercice : Ajoutez un signe supérieur à et un espace avant chaque titre h2

Solution :

$('h2').prepend('> ');

 

Exercice : Remplacez successivement prepend par append, before et after pour mettre en évidence les différences de ces méthodes

 

Exercice : Insérez un trait horizontal après chaque paragraphe

Solution :

$('p').append('<hr>');
Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply