Création d'élément HTML

Créer un élément HTML

Pour créer un élément HTML, nous devons utiliser la méthode document.createElement. Cette méthode prend en argument le nom de la balise de l'élément que nous voulons créer. Nous pouvons l'utiliser de la façon suivante:

Javascript

Une fois l'élément créé, il n'est pas encore visible sur la page. Il est simplement en mémoire dans le Javascript. C'est d'ailleurs pour cela que nous devons le stocker dans une variable. Autrement, nous ne pourrons pas y accéder pour le modifier ou l'ajouter à la page.

Un élément HTML en mémoire réagit de la même manière qu'un élément dans la page, mise à part qu'il n'est pas affiché. Nous pouvons donc modifier les attributs, les styles et les événements de cet élément avant de l'ajouter à la page.

Javascript

Ajouter un élément à la page

Pour ajouter un élément à la page, nous devons le rattacher à un élément déjà existant. Pour cela, nous utilisons la fonction appendChild. Cette méthode s'exécute sur l'élément dans lequel nous voulons ajouter notre nouvel élément et prend en argument l'élément que nous voulons.

Voici un exemple:

HTML

Javascript

À noter

Vous noterez l'utilisation de la propriété children de l'élément liste dans l'exemple ci-dessus. Cette propriété est un tableau contenant tous les éléments enfants de l'élément. Cela nous permet de savoir combien d'éléments sont déjà dans la liste, mais aussi de les parcourir si nous en avons besoin.

Retirer un élément

Pour retirer un élément de la page, nous utiliserons la fonction remove() sur l'élément que nous voulons retirer. Cette méthode est très simple à utiliser, car elle ne prend aucun argument.

Voici un exemple:

HTML

Javascript

À noter

Dans cet exemple, nous utilisons la propriété parentElement. Cette propriété retourne l'élément parent de l'élément sur lequel elle est appelée. Cela nous permet de retrouver l'élément qui contient le bouton, dans ce cas-ci, le <div> parent que nous voulons supprimer.

<< Page précédente Page suivante >>