Créer des éléments

 
Dans la vidéo précédente, on a vu comment modifier et supprimer des éléments existants.

Il est maintenant temps qu’on voit comment en créer des nouveaux.

createElement

const jaune = document.createElement('div');
jaune.classList.add('jaune');
jaune.textContent = "Jaune";

document.body.appendChild(jaune);

On vient de créer le nouvel élément jaune. Cet elément est une div, on lui a ajouté la classe CSS ‘jaune’ et on a écrit le texte ‘Jaune’ dedans.

Construire le contenu HTML de notre élément

function planifierTache(heure, tache) {
  const nouvelleTache = document.createElement('li');
  nouvelleTache.innerHTML = `<h3>${heure}:</h3><p>${tache}</p>`;
  document.querySelector('ul').appendChild(nouvelleTache);
}

planifierTache('08h00', 'Petit-Dejeuner');
planifierTache('08h30', 'Sport');
planifierTache('09h30', 'Aller au travail');