Pour implémenter la méthode append() en js natif, des exemples de code spécifiques sont requis

Lors de l'écriture de code JavaScript, il est souvent nécessaire d'ajouter du nouveau contenu aux éléments spécifiés dans la page Web. Une opération courante consiste à définir le contenu HTML de l'élément via l'attribut innerHTML. Cependant, l'utilisation de l'attribut innerHTML entraîne parfois la perte des écouteurs d'événements, des styles, etc. à l'intérieur de l'élément. Afin de mieux implémenter la fonction d'ajout de contenu, nous pouvons implémenter nous-mêmes une méthode append(). La méthode

append() peut ajouter un nouveau contenu à la fin de l'élément spécifié, c'est-à-dire ajouter la chaîne de code HTML donnée à l'intérieur de l'élément. Ce qui suit est un morceau de code qui utilise du JavaScript natif pour implémenter la méthode append() :

function append(element, html) { var div = document.createElement('div'); div.innerHTML = html; while (div.children.length > 0) { element.appendChild(div.children[0]); } }

Dans le code ci-dessus, nous définissons une fonction nommée append(), qui reçoit deux paramètres : element représente l'élément cible pour ajouter du contenu, html Représente la chaîne de code HTML à ajouter.

Tout d'abord, nous créons un élément div, puis attribuons la chaîne de code HTML à ajouter à l'attribut innerHTML de l'élément div. De cette façon, nous analysons la chaîne de code HTML en éléments DOM.

Ensuite, nous utilisons une boucle while pour parcourir les nœuds enfants de l'élément div et ajouter les nœuds enfants à l'élément cible un par un. Au cours de l'itération, nous utilisons la méthode appendChild() pour ajouter des nœuds enfants à l'extrémité interne de l'élément spécifié. Une fois la boucle terminée, tous les nœuds enfants de l'élément div seront ajoutés à l'élément cible.

Lorsque nous utilisons cette méthode append() personnalisée, il nous suffit de l'appeler en passant l'élément cible et la chaîne de code HTML à ajouter, et nous pouvons implémenter la fonction d'ajout de contenu à l'élément spécifié sans nous soucier des événements internes et Perte de style.

Ce qui suit est un exemple d'utilisation de la méthode append() personnalisée. Supposons que nous ayons un élément avec l'identifiant "myDiv" et que nous souhaitions y ajouter un titre h1 et un paragraphe :

var myDiv = document.getElementById('myDiv'); var html = '
这是一个标题
这是一个段落
'; append(myDiv, html);

Le code ci-dessus sera ajouté

这是一个标题

En utilisant JavaScript natif pour implémenter la méthode append(), vous pouvez ajouter du contenu à l'élément spécifié de manière plus flexible tout en conservant les écouteurs d'événements et les styles à l'intérieur de l'élément. Grâce à des méthodes personnalisées, nous pouvons réaliser des opérations DOM plus contrôlables, efficaces et sûres.

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!