Javascript Ajouter

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:

       53h1N2e2JcTmRTZIFItMB6Lz9mFISGZQ CP6OkNpEvNsAmFR5uykmTYLkS1F50UOokk62H14EHqSN4LOq0f3eGcfshnlatBuNVgGGf0WKaDgoBs8g . <h3 vous pouvez ajouter une liste de composants Web, nous devons sélectionner les éléments avec lesquels nous allons travailler. block-codemirror-blocks-code-block code- block
      const student = document.querySelector (" ul "); 

    Cette ligne de code sélectionnera l`élément sur notre page avec la balise

    Utiliser la méthode JavaScript appendChild ()

    appendChild () nous permet de ajoutez des éléments à un nœud. le code suivant au bas du fichier scripts.js :

    Cela ajoutera l`élément de liste que nous avons créé précédemment à notre liste. Ouvrons notre page Web et voyons les résultats :

    PPX9hW Qztc6gNJKNyOeRE2U6hg08YNO H0wIbQGGo9MfA90aFLp A7RDQ8 PsqdHEh6mSG OcHJeDB3efXaFHwI9Fa9DUKqkBjA7qzYk49xSJgps8C2vXIrS0sUxDOoDhiw TGS

    notre liste est maintenant une partie, nous peut rendre notre code plus efficace ient la création d`une fonction qui ajoute des éléments à notre liste. Cela nous permettra d`ajouter plus d`éléments sans avoir à répéter notre code createElement d`avant.

    Modifiez createElement et textContent lignes de code pour ressembler à ceci :

    Cette fonction créera un nouvel élément

  • chaque fois qu`elle sera appelée. Ensuite, modifiez l`instruction appendChild () pour utiliser cette fonction :

    Cela créera trois élèves : Mark, Chloe et Louise. Ouvrons à nouveau notre fichier index.html et voyons si les modifications ont été apportées :