Javascript Ajouter

Michael Zippo 04.11.2021

La méthode JavaScript appendChild () ajoute un élément à la fin d`un nœud. appendChild() est souvent utilisé pour ajouter

des éléments à une liste. Vous devez utiliser plusieurs instructions appendChild () si vous souhaitez ajouter plusieurs éléments à un nœud.

Certaines listes contiennent du texte ; d`autres répertoires contiennent des images ; d`autres listes contiennent des éléments Web personnalisés. Quel que soit le contenu d`une liste, une chose est sûre : les pages Web regorgent de listes.

Lorsque vous créez une liste, vous encodez généralement ses valeurs ‚Äã‚Äãen HTML. Ce processus peut être accéléré à l`aide d`une méthode appelée JavaScript appendChild. Cette méthode vous permet d`ajouter un élément à la fin d`une liste ou d`un autre élément Web, tel qu`un bloc de citation.

Dans ce guide, nous parlerons de ce que appendChild ( ) est en JavaScript et son fonctionnement. Nous allons regarder un exemple pour vous aider à démarrer. Commençons !

Qu`est-ce que le JavaScript appendChild ?

appendChild () ajoute un nœud à la fin d`un nœud parent. appendChild () est couramment utilisé pour ajouter des éléments à une liste HTML. Un nœud fait référence à n`importe quel élément du modèle d`objet de document HTML (DOM).

La syntaxe de appendChild () ressemble à ceci :

"parent" fait référence à l`élément auquel vous souhaitez ajouter un enfant. "Child" est l`élément que vous souhaitez ajouter à la fin du parent.

Vous devez utiliser une méthode telle que JavaScript getElementById () ou un autre "Get" pour récupérer un élément. Alternativement, vous pouvez créer un élément HTML en JavaScript, puis utiliser cet élément comme objet "parent" avec appendChild().

Par exemple, une liste de recettes de scone contient une liste de nœuds. Ces nœuds seraient probablement

parce que nous créerions une liste.

Un parent

Mise en place d`un front-end

Pour First, nous allons mettre en place une interface de base affichant notre liste de noms d`étudiants. Ouvrez un fichier appelé index.html et collez ce code :

Nous avons créé un document HTML de base. Ce document contient un titre et une liste sans sous-éléments. La liste est représentée par la balise
.
Ajoutons maintenant certains styles à notre page dans un fichier appelé styles.css pour améliorer l`esthétique de notre web pa ge :

Cette règle CSS définira une couleur de fond gris clair pour notre page. Pour ce faire, nous utilisons la propriété CSS background-color . Il déplace également le contenu de la balise au centre de la page. Pour en savoir plus sur la façon dont nous avons structuré la mise en page, consultez notre Guide des modèles de boîtes CSS .
Notre page ne fonctionne toujours pas. Nous n`avons rien ajouté à la liste. Voici ce que notre page ressemble quand vous l`ouvrez dans un navigateur:

const student = document.querySelector (" ul ");

Cette ligne de code sélectionnera l`élément sur notre page avec la balise
Ceci représente notre liste. Ensuite, nous allons créer un élément à ajouter à notre liste :

T son code crée un nœud de texte avec une balise
qui contient le mot "Steven". Il ne nous reste plus qu`à ajouter notre nouvel élément à notre liste.

Javascript Ajouter

Qu`est-ce que le JavaScript appendChild ?

Mise en place d`un front-end

Utiliser la méthode JavaScript appendChild ()