createElement, appendChild et innerHTMLLe DOM (Document Object Model) est une structure d’une page HTML sous forme d’un arbre d’objets, que JavaScript peut manipuler.Cette page présente trois méthodes essentielles en JavaScript pour créer, insérer et modifier dynamiquement des éléments HTML. Ces techniques sont fondamentales pour rendre une interface web interactive et réactive.
createElement
La méthode createElement permet de créer un nouvel élément HTML en JavaScript. Elle génère un nœud dans le DOM, mais celui-ci n'est pas encore visible tant qu'il n'a pas été ajouté à la page.
const paragraphe = document.createElement('p');appendChild
La méthode appendChild permet d'ajouter un élément créé à l'intérieur d'un élément déjà présent dans la page. C'est à ce moment-là que le nouvel élément devient visible pour l'utilisateur.
document.body.appendChild(paragraphe);innerHTML
La propriété innerHTML sert à modifier le contenu HTML d'un élément. Elle peut insérer du texte, des balises HTML ou remplacer entièrement le contenu existant.
element.innerHTML = 'Nouveau contenu HTML';innerHTMLelement.innerHTML = nouveauContenuHTML
Exemple : cette propriété peut ajouter le texte « Ceci est un nouveau paragraphe ajouté dynamiquement. » à l'intérieur d'un élément déjà créé précédemment.
Voici un exemple simple qui combine les trois concepts : création d'un paragraphe, ajout dans le document et insertion d'un contenu HTML dynamique.
<script>
const paragraphe = document.createElement('p');
paragraphe.innerHTML = 'Ceci est un nouveau paragraphe ajouté dynamiquement.';
document.body.appendChild(paragraphe);
</script>createElement crée un nœud dans le DOM, mais ne l'affiche pas tant qu'il n'est pas ajouté à un élément existant avec appendChild.innerHTML est pratique, mais il doit être utilisé avec précaution pour éviter les failles de sécurité, notamment les attaques XSS, si le contenu vient de sources non fiables.textContent.
createElement, appendChild et innerHTML sont des outils puissants pour manipuler DOM et rendre les pages web dynamiques. Ils permettent de créer, d’ajouter et de modifier des éléments HTML en fonction des interactions de l’utilisateur ou des données provenant de sources externes.
Ce mini-projet démontre ma compréhension des bases du DOM en JavaScript ainsi que ma capacité à structurer du contenu pédagogique en HTML et CSS.