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>

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);

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>

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>

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);

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>

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 :

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.");

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!