0Pricing
Frontend Academy · Leçon

Créer et ajouter des éléments

Utilisez createElement, setAttribute, append et remove pour construire et modifier dynamiquement la structure du DOM.

Créer et ajouter des éléments est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

createElement

document.createElement(tagName) crée un nouvel élément en mémoire : il ne se trouve pas encore dans le DOM. Vous définissez ensuite ses propriétés et l’ajoutez à l’arbre.

const btn = document.createElement('button');
btn.textContent = 'Click Me';
btn.classList.add('btn-primary');
btn.setAttribute('type', 'button');
// btn is in memory, not yet in the page

append et appendChild

parent.append(child) ajoute un nœud ou une chaîne à la fin des enfants de parent. appendChild est l’équivalent plus ancien, mais append est plus flexible : il accepte plusieurs nœuds et chaînes.

const list = document.querySelector('ul');
const item = document.createElement('li');
item.textContent = 'New item';
list.append(item); // adds to end of list

prepend, before, after

parent.prepend() ajoute au début. element.before() insère avant l'élément. element.after() insère après celui-ci.

const header = document.querySelector('.card-header');
const icon = document.createElement('img');
icon.src = 'icon.svg';
header.prepend(icon); // icon goes before all other children

const divider = document.createElement('hr');
header.after(divider); // divider goes after the header

insertAdjacentHTML

element.insertAdjacentHTML(position, htmlString) insère du HTML à une position donnée sans remplacer le contenu existant. Positions : 'beforebegin', 'afterbegin', 'beforeend', 'afterend'.

const container = document.querySelector('.list');
container.insertAdjacentHTML('beforeend', `
  <li class="item">
    <span class="name">Alice</span>
  </li>
`);
// Still avoid with user input — XSS risk

cloneNode

element.cloneNode(true) crée une copie profonde d'un élément, y compris tous ses enfants. Passez false pour obtenir une copie superficielle. Pratique pour dupliquer des éléments template.

const template = document.querySelector('.card-template');
const clone = template.cloneNode(true);
clone.querySelector('.card-title').textContent = 'New Card';
container.append(clone);

removeChild et remove()

element.remove() supprime l'élément du DOM. L'ancienne méthode parent.removeChild(child) fonctionne également. Les éléments supprimés peuvent toujours être référencés dans des variables et ajoutés de nouveau.

const item = document.querySelector('.to-delete');
item.remove(); // clean modern syntax

replaceWith

oldElement.replaceWith(newElement) remplace l'ancien élément du DOM par le nouveau. Plus pratique que l'ancien modèle replaceChild.

const old = document.querySelector('.old-banner');
const fresh = document.createElement('div');
fresh.className = 'new-banner';
fresh.textContent = 'Updated!';
old.replaceWith(fresh);

DocumentFragment pour les insertions groupées

Un DocumentFragment est un container léger qui n'existe pas dans le DOM. Construisez-y une sous-arborescence, puis ajoutez-la en une seule opération : cela ne provoque qu'un seul recalcul de mise en page au lieu de N.

const fragment = document.createDocumentFragment();
users.forEach(user => {
  const li = document.createElement('li');
  li.textContent = user.name;
  fragment.append(li);
});
// One DOM write:
document.querySelector('ul').append(fragment);

L'élément &lt;template&gt;

L'élément HTML <template> contient du balisage qui n'est pas rendu tant qu'il n'a pas été cloné avec JavaScript. C'est préférable à la construction de chaînes ou au clonage d'éléments visibles.

<template id="card-tpl">
  <div class="card">
    <h3 class="card-title"></h3>
    <p class="card-body"></p>
  </div>
</template>

Définir des propriétés plutôt que des attributs

Les propriétés des éléments (el.href, el.src, el.value) sont souvent le moyen le plus direct et le plus performant de définir des valeurs. Les attributs (setAttribute) sont préférables pour les attributs personnalisés ou ARIA qui n'ont pas de propriété DOM correspondante.

// Property (preferred for standard HTML attributes):
img.src = '/photo.webp';
link.href = '/about';

// setAttribute (for ARIA and custom attributes):
button.setAttribute('aria-expanded', 'true');
div.setAttribute('data-index', '3');

Éviter innerHTML avec le contenu utilisateur

Lorsque vous construisez des éléments à partir de données fournies par l'utilisateur, utilisez toujours les méthodes du DOM (createElement, textContent, setAttribute) plutôt que de construire une chaîne HTML et d'utiliser innerHTML. N'interpolez jamais les entrées utilisateur dans des chaînes HTML.

// DANGEROUS:
container.innerHTML = `<p>${userComment}</p>`;

// SAFE:
const p = document.createElement('p');
p.textContent = userComment;
container.append(p);

Vérification rapide

Vous devez ajouter 100 éléments de liste à un <ul> sans provoquer 100 recalculs de mise en page. Quelle approche est la meilleure ?

Récapitulatif : créer des éléments DOM

createElement crée en mémoire. append/prepend/before/after insèrent dans l'arborescence. remove() supprime un élément. DocumentFragment regroupe les insertions pour améliorer les performances. L'élément