Chapitre 5 – Manipulation du DOM

1) Rappel : le DOM, c’est ton HTML “vivant”

Le DOM est la représentation “programmable” du HTML. Quand tu fais : $('#titre').text('...'), tu modifies le DOM et donc l’affichage.

2) Modifier du texte : text()

text() sert à lire ou écrire le texte d’un élément. Quand tu écris du texte, jQuery échappe automatiquement le contenu (sécurité).

Lire le texte

const titre = $('#titre').text();
console.log(titre);

Écrire du texte

$('#titre').text('Bienvenue !');

3) Modifier du HTML : html()

html() lit/écrit le contenu HTML d’un élément. C’est puissant, mais plus risqué si tu injectes des données non maîtrisées.

Lire le HTML

const contenu = $('#box').html();
console.log(contenu);

Écrire du HTML

$('#box').html('<strong>Succès</strong> : opération validée');

4) Ajouter à la fin / au début : append(), prepend()

Ces méthodes insèrent du contenu (souvent du HTML) dans un élément.

append() : ajoute à la fin

$('#list').append('<li class="item">Nouveau</li>');

prepend() : ajoute au début

$('#list').prepend('<li class="item">Important</li>');

5) Insérer avant / après : before(), after()

Ces méthodes insèrent du contenu autour de l’élément ciblé (pas à l’intérieur).

$('#box').before('<p>Texte avant</p>');
$('#box').after('<p>Texte après</p>');

6) Remplacer du contenu : empty(), remove(), replaceWith()

empty() : vide l’intérieur (l’élément reste)

$('#list').empty();

remove() : supprime l’élément du DOM

$('#popup').remove();

replaceWith() : remplace un élément par un autre

$('#old').replaceWith('<div id="new">Nouveau contenu</div>');

7) Créer des éléments proprement : $(<tag>)

Au lieu d’écrire des longues chaînes HTML, tu peux construire un élément jQuery et le configurer : c’est souvent plus propre et plus maintenable.

Créer un élément

const $li = $('<li>');
$li.addClass('item');
$li.text('Élément créé proprement');
$('#list').append($li);

Créer avec attributs (ex : data-id)

const $btn = $('<button>', {
  class: 'btn',
  text: 'Supprimer',
  'data-id': '42'
});

$('#actions').append($btn);

8) Lire/écrire une valeur de formulaire : val()

Pour les champs de formulaire (input, select, textarea), on utilise val().

Lire

const email = $('#email').val();
console.log(email);

Écrire

$('#email').val('test@mail.com');

9) Petit “pattern UI” : afficher un message utilisateur

Cas réel : après une action (submit, clic), afficher un message “succès” ou “erreur”.

function showMessage(type, text) {
  // type: 'ok' | 'warn'
  const $box = $('#message');

  // Sécurité : text() pour les données utilisateur
  $box.text(text);

  // On nettoie les classes, puis on met la bonne
  $box.removeClass('ok warn').addClass(type);
}

// Exemple :
showMessage('ok', 'Enregistré avec succès.');

10) Erreurs fréquentes (à éviter)

Erreur A : utiliser html() avec une donnée non fiable

// ⚠️ Risqué si pseudo vient d’un formulaire
$('#out').html(pseudo);

// ✅ Sûr
$('#out').text(pseudo);

Erreur B : append() dans une boucle sans optimiser

Ajouter 500 éléments un par un peut être lent. On peut : construire un fragment HTML, ou utiliser une chaîne puis insérer en une fois.

let html = '';
for (let i = 1; i <= 500; i++) {
  html += `<li>Item ${i}</li>`;
}
$('#list').html(html);

Exercice (progressif) – Todo list DOM

Objectif : créer une mini “todo” en DOM.

1. Un champ #task + bouton #add
2. Au clic, ajouter un <li> dans #list avec le texte saisi
3. Bonus : ajouter un bouton “Supprimer” dans chaque <li>

<input id="task" />
<button id="add">Ajouter</button>
<ul id="list"></ul>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $(function(){
    $('#add').on('click', function(){
      const task = String($('#task').val()).trim();
      if(!task) return;

      const $li = $('<li>');
      $li.text(task + ' ');

      const $del = $('<button>', { text: 'Supprimer' });
      $del.on('click', function(){
        $li.remove();
      });

      $li.append($del);
      $('#list').append($li);
      $('#task').val('');
    });
  });
</script>

Résumé du chapitre

• text() : lire/écrire du texte (sécurisé)
• html() : lire/écrire du HTML (attention XSS)
• append()/prepend() : insérer à l’intérieur
• before()/after() : insérer autour
• empty()/remove() : vider/supprimer
• Créer un élément proprement avec $('<tag>')
• val() : lire/écrire une valeur de formulaire