Maison interface Web js tutoriel La différence entre appendChild et append dans JS

La différence entre appendChild et append dans JS

Feb 20, 2024 pm 06:57 PM
区别 élément HTML

La différence entre appendChild et append dans JS

La différence entre appendChild et append dans JS nécessite des exemples de code spécifiques

En JavaScript, lorsque nous devons ajouter dynamiquement des éléments enfants au DOM (Document Object Model), nous utilisons généralement les méthodes appendChild et append. Bien que leur objectif soit d'ajouter des éléments enfants aux éléments parents, il existe certaines différences dans leur utilisation.

1. Méthode appendChild
La méthode appendChild est l'une des méthodes de l'objet nœud DOM, utilisée pour ajouter un nœud enfant au nœud parent spécifié. La syntaxe de base est la suivante :

parentNode.appendChild(childNode);

Parmi eux, parentNode est le nœud parent pour ajouter le nœud enfant, et childNode est le nœud enfant à ajouter.

Voici un exemple de code concret, en supposant que nous avons un élément parent div et un élément enfant p :

<div id="parent"></div>
<p id="child">This is a child paragraph.</p>
Copier après la connexion
Copier après la connexion

Nous pouvons utiliser la méthode appendChild pour ajouter l'élément enfant p à l'élément parent div :

var parent = document.getElementById("parent");
var child = document.getElementById("child");
parent.appendChild(child);
Copier après la connexion

Dans l'exemple ci-dessus , le nœud enfant est ajouté au nœud parent. À ce stade, la structure HTML du div deviendra :

<div id="parent">
  <p id="child">This is a child paragraph.</p>
</div>
Copier après la connexion
Copier après la connexion

2. méthode append
La méthode append ajoute l'élément HTML spécifié à un élément parent en utilisant le sélecteur querySelector ou querySelectorAll. La syntaxe de base est la suivante :

parentElement.append(element[, ...elementN]);

Parmi eux, parentElement est l'élément parent auquel être ajouté et element est l'élément HTML à ajouter.

Voici un exemple de code spécifique, en supposant que nous avons un élément parent div et un élément enfant p :

<div id="parent"></div>
<p id="child">This is a child paragraph.</p>
Copier après la connexion
Copier après la connexion

Nous pouvons utiliser la méthode append pour ajouter l'élément enfant p à l'élément parent div :

var parent = document.getElementById("parent");
var child = document.getElementById("child");
parent.append(child);
Copier après la connexion

Dans l'exemple ci-dessus , l'élément enfant est ajouté à l'élément parent. À ce stade, la structure HTML du div deviendra :

<div id="parent">
  <p id="child">This is a child paragraph.</p>
</div>
Copier après la connexion
Copier après la connexion

3. La différence entre appendChild et append

  1. Type de paramètre :

    • appendChild n'accepte qu'un seul paramètre, qui est le nœud enfant à ajouter ; La méthode
    • append peut accepter Plusieurs paramètres peuvent ajouter plusieurs sous-éléments à la fois.
  2. Valeur de retour : la méthode

      appendChild renvoie le nœud enfant nouvellement ajouté ; la méthode
    • append n'a pas de valeur de retour.
  3. Les chaînes sont automatiquement converties en nœuds de texte : la méthode

      append permet de passer une chaîne ou un code HTML en tant que paramètre et elle le convertira automatiquement en nœud de texte et l'ajoutera à l'élément parent ; Accepte uniquement les objets nœuds comme paramètres, les chaînes ne peuvent pas être ajoutées directement à l'élément parent.
    Ce qui suit est un exemple de code spécifique qui compare certaines différences entre les méthodes appendChild et append :
  4. var parent = document.getElementById("parent");
    
    // 使用appendChild方法添加子节点
    var child1 = document.createElement("p");
    var text1 = document.createTextNode("This is child 1.");
    child1.appendChild(text1);
    parent.appendChild(child1);
    
    // 使用append方法添加子元素和字符串
    var child2 = document.createElement("p");
    var text2 = document.createTextNode("This is child 2.");
    child2.appendChild(text2);
    
    var child3 = document.createElement("p");
    child3.append("This is child ", 3); 
    
    parent.append(child2, child3, "This is child 4.");
    Copier après la connexion
    Grâce au code ci-dessus, nous pouvons voir que la méthode append peut non seulement ajouter directement des éléments HTML, mais aussi convertir directement chaînes en tant que nœud de texte et ajoutées à l’élément parent.

    Pour résumer, il existe quelques différences entre les méthodes appendChild et append lors de l'ajout d'éléments enfants aux éléments parents. Au cours du processus d'utilisation, nous pouvons choisir de manière flexible quelle méthode est la plus adaptée pour atteindre nos objectifs.

    Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Vous avez un jeu croisé?
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

La différence entre H5 et mini-programmes et applications La différence entre H5 et mini-programmes et applications Apr 06, 2025 am 10:42 AM

H5. La principale différence entre les mini programmes et l'application est: Architecture technique: H5 est basé sur la technologie Web, et les mini-programmes et l'application sont des applications indépendantes. Expérience et fonctions: H5 est légère et facile à utiliser, avec des fonctions limitées; Les mini-programmes sont légers et ont une bonne interactivité; Les applications sont puissantes et ont une expérience fluide. Compatibilité: H5 est compatible multiplateforme, les applets et les applications sont limités par la plate-forme. Coût de développement: H5 a un faible coût de développement, des mini-programmes moyens et une application la plus élevée. Scénarios applicables: H5 convient à l'affichage d'informations, les applets conviennent aux applications légères et les applications conviennent aux fonctions complexes.

Comment définir la protection des mots de passe pour l'exportation PDF sur PS Comment définir la protection des mots de passe pour l'exportation PDF sur PS Apr 06, 2025 pm 04:45 PM

Exporter PDF protégé par mot de passe dans Photoshop: ouvrez le fichier image. Cliquez sur "Fichier" & gt; "Export" & gt; "Exporter en PDF". Définissez l'option "Sécurité" et entrez le même mot de passe deux fois. Cliquez sur "Exporter" pour générer un fichier PDF.

Concept de fonction de langue C Concept de fonction de langue C Apr 03, 2025 pm 10:09 PM

Les fonctions de langue C sont des blocs de code réutilisables. Ils reçoivent des entrées, effectuent des opérations et renvoient les résultats, ce qui améliore modulairement la réutilisabilité et réduit la complexité. Le mécanisme interne de la fonction comprend le passage des paramètres, l'exécution de la fonction et les valeurs de retour. L'ensemble du processus implique une optimisation telle que la fonction en ligne. Une bonne fonction est écrite en suivant le principe de responsabilité unique, un petit nombre de paramètres, des spécifications de dénomination et une gestion des erreurs. Les pointeurs combinés avec des fonctions peuvent atteindre des fonctions plus puissantes, telles que la modification des valeurs de variables externes. Les pointeurs de fonctions passent les fonctions comme des paramètres ou des adresses de magasin, et sont utilisées pour implémenter les appels dynamiques aux fonctions. Comprendre les fonctionnalités et les techniques des fonctions est la clé pour écrire des programmes C efficaces, maintenables et faciles à comprendre.

Quelles sont les différences et les connexions entre C et C #? Quelles sont les différences et les connexions entre C et C #? Apr 03, 2025 pm 10:36 PM

Bien que C et C # aient des similitudes, ils sont complètement différents: C est une gestion manuelle de la mémoire manuelle et un langage dépendant de la plate-forme utilisé pour la programmation système; C # est un langage orienté objet, des ordures et un langage indépendant de la plate-forme utilisé pour le bureau, l'application Web et le développement de jeux.

Comment utiliser XPath pour rechercher à partir d'un nœud DOM spécifié en JavaScript? Comment utiliser XPath pour rechercher à partir d'un nœud DOM spécifié en JavaScript? Apr 04, 2025 pm 11:15 PM

Explication détaillée de la méthode de recherche XPATH sous les nœuds DOM en JavaScript, nous devons souvent trouver des nœuds spécifiques de l'arbre Dom basé sur les expressions XPath. Si vous avez besoin de ...

Pourquoi avez-vous besoin d'appeler Vue.User (VUerouter) dans le fichier index.js dans le dossier du routeur? Pourquoi avez-vous besoin d'appeler Vue.User (VUerouter) dans le fichier index.js dans le dossier du routeur? Apr 05, 2025 pm 01:03 PM

La nécessité d'enregistrer VUerouter dans le fichier index.js dans le dossier du routeur Lors du développement d'applications VUE, vous rencontrez souvent des problèmes de configuration de routage. Spécial...

La différence dans les résultats de sortie de Console.log: Pourquoi les mêmes variables ont-elles des méthodes d'impression différentes mais des résultats différents? La différence dans les résultats de sortie de Console.log: Pourquoi les mêmes variables ont-elles des méthodes d'impression différentes mais des résultats différents? Apr 04, 2025 am 11:48 AM

Une discussion approfondie des différences de console. La sortie de la log dans cet article analysera les raisons pour lesquelles les résultats de sortie de la fonction Console.log dans un morceau de code sont différents. Les extraits de code impliquent une résolution des paramètres URL ...

Quelles sont les différentes façons de promouvoir les programmes H5 et Mini? Quelles sont les différentes façons de promouvoir les programmes H5 et Mini? Apr 06, 2025 am 11:03 AM

Il existe des différences dans les méthodes de promotion des programmes H5 et MINI: la dépendance à la plate-forme: H5 dépend du navigateur, et les programmes mini reposent sur des plateformes spécifiques (telles que WeChat). Expérience utilisateur: L'expérience H5 est médiocre et le programme MINI offre une expérience fluide similaire aux applications natives. Méthode de communication: H5 se propage via des liens et les mini programmes sont partagés ou recherchés via la plate-forme. H5 Méthodes de promotion: partage social, marketing par e-mail, code QR, référencement, publicité payante. Mini méthodes de promotion du programme: Promotion de la plate-forme, partage social, promotion hors ligne, ASO, coopération avec d'autres plateformes.

See all articles