createElement et appendChild

Leçon 12 sur 13 du cours Méthodes DOM en JavaScript de Coddy.

La fonction createElement() crée un nouvel élément HTML avec le nom de balise spécifié (par exemple, div, p, span). Par exemple :

const newElement = document.createElement("p");

La fonction appendChild() insère un élément enfant spécifié comme le dernier enfant d'un autre élément. Cela vous permet de construire et de modifier la hiérarchie du contenu de votre page web. Par exemple :

const childElement = document.createElement("p");
childElement.textContent = "This is a new child element.";
parentElement.appendChild(childElement);

Dans l'exemple ci-dessus, nous créons un nouvel élément p et l'ajoutons à l'intérieur de l'élément parentElement.

Défi

Facile

On vous donne un code HTML qui contient une liste non ordonnée avec un ID myList.

En utilisant uniquement JavaScript, ajoutez un autre élément de liste à la liste non ordonnée et ajoutez-y le texte "Dog".

Essayez vous-même

<!DOCTYPE html>
<html>
    <body>
        <ul id="animals">
            <li>Cow</li>
            <li>Ant</li>
            <li>Bear</li>
            <li>Camel</li>
        </ul>
        <script src="script.js"></script>
    </body>
</html>

Toutes les leçons de Méthodes DOM en JavaScript

1Introduction

Introduction Document Object Model

2Méthodes du DOM I

getElementById Modifier le style d'un élément getElementsByClassName Parcourir et manipuler getElementsByTagName querySelector

3Méthodes du DOM II

querySelectorAll addEventListener innerHTMLcreateElement et appendChildclassList toggle