Comment ajouter un enfant dans DOM en utilisant la méthode de l'annexe en JavaScript?

Si vous souhaitez modifier un élément de HTML à l'aide du langage de script, vous devez vous référer à Dom également connu sous le nom de modèle d'objet de document. Dom à son cœur même est une interface de programmation simple pour ce fichier HTML ou en d'autres termes pour la page Web spécifique. Aucun langage de script n'est utile sans interface DOM lorsqu'il s'agit de manipuler les éléments HTML.

L'une des manipulations de page Web les plus courantes est de remplacer un nœud ou d'ajouter un nœud enfant à l'intérieur d'un nœud parent. Cela peut être fait à travers le APPENDCHILD () Méthode en javascript.

Qu'est-ce que .Méthode appenchild ()

Le .APPENDCHILD () La méthode est une fonction JavaScript intégrée qui est utilisée pour ajouter un nœud enfant sous un nœud parent. Le .APPENDCHILD () exécute cet exploit en utilisant le Interface de nœud DOM. Nous connaissons maintenant ce qu'il fait, alors regardons sa syntaxe.

Syntaxe de .Méthode appenchild ()

La syntaxe de .APPENDCHILD () est assez explicite. C'est comme:

norme parentale.APPENDCHILD (ChildNode);

Comme vous pouvez le voir clairement, il se compose des éléments suivants:

• norme parentale: L'élément dans lequel l'autre nœud doit être ajouté.
• infil: L'élément à ajouter.

Quand la méthode APPENDCHILD () est-elle utilisée

Le .APPENDCHILD () Ajoute un élément nouvellement créé à l'intérieur du DOM. Il est également utilisé lorsque vous devez réorganiser un élément déjà existant. Dans la plupart des cas, les deux fonctionnalités, le réarrangement des éléments existants et la création d'un nouvel élément, puis l'ajout au DOM se fait lors d'un événement invoqué en raison de l'interaction de l'utilisateur avec la page Web. Cet événement pourrait cliquer sur un bouton à l'écran, un emplacement de souris spécifique ou même un coup de clé spécifique.

Exemple

Nous ne pouvons rien apprendre avant de l'essayer. Alors essayons d'utiliser le .APPENDCHILD () méthode. Nous devons:

• Créer une page HTML avec un nœud parent
• Créer un bouton qui invoquera le processus d'appel
• Créer un nœud enfant.
• Ajoutez le nœud enfant dans le nœud parent sur le bouton Appuyez sur.

Commençons par la première étape qui consiste à configurer une page HTML. Créer un nœud parent en créant un div avec un id = «démo»: À l'intérieur de cette div, nous lui donnons un nœud enfant qui est un

étiqueter:

C'est le paragraphe 1 à l'intérieur de la balise "div"

Faisons le nœud parent qui est dans notre cas le

Tag un peu proéminent également en lui donnant une couleur d'arrière-plan. Pour ce faire, utilisez la démo id = «Demo» et donnez-lui du style CSS avec les lignes suivantes

Nous obtiendrons les résultats suivants.

Maintenant, nous savons que le nœud parent de

La balise est mise en évidence. Si nous ajoutons un nœud enfant à l'intérieur de ce nœud parent, la zone en surbrillance augmenterait.

Revenir à l'ajout d'un nœud enfant. Créons un déclencheur pour ajouter un nœud enfant, et à cette fin, nous allons ajouter un bouton à l'écran avec la ligne suivante:

Cliquez pour annexe

Avec cela, notre sortie devient:

Nous devons déclarer la fonction qui ajoutera un nœud enfant à l'intérieur du div Sur chaque bouton, appuyez sur. Créez la fonction comme ceci:

Laissez compter = 2;
fonction btnClicked ()
// Ajouter le code ultérieur à l'intérieur ici.

Comme vous pouvez le remarquer, nous avons créé une variable appelée «compteur». Cette variable gardera un contrôle sur le nombre de nœuds enfants que nous avons annexés dans le nœud parent. Puisque nous avons déjà un

étiqueter En tant que premier enfant, nous commençons le comptoir à partir de «2».

Maintenant, nous avons besoin d'un nœud enfant. Pour cela, nous allons créer un

étiqueter avec du texte à l'intérieur. Pour créer un

Tag, nous devons d'abord créer un Tampon et un nœud de paragraphe puis ajoutez le nœud de texte dans le

étiqueter nœud.

Créer un Tampon avec la commande suivante:

textNode = document.CreateTextNode ("Ceci est paragraphe" + compteur + 'inside "div" tag');

Comme vous pouvez le voir, nous utilisons la valeur du compteur pour inviter l'utilisateur sur le nombre de nœuds enfants présents dans le nœud parent.

La prochaine étape consiste à créer le

Élément de balise:

ptag = document.CreateElement ("P");

Maintenant, nous devons ajouter le Tampon dans le ptag:

ptag.APPENDCHILD (TextNode);

Enfin, nous devons ajouter cela ptag à l'intérieur de div avec le Demo id = ”:

parentNode = document.getElementById ("démo");
norme parentale.appenchild (ptag);

Avant de quitter le btnclicked () Fonction, nous devons également augmenter la valeur du compteur:

compteur ++;

L'extrait de code complet ressemblera à ceci:

Il est temps d'exécuter enfin notre page Web et de regarder les résultats. Vous devriez le voir sur votre écran:

Là, vous l'avez, nous avons réussi à ajouter divers nœuds enfants à l'intérieur d'un nœud parent. Nous pouvons également le confirmer en examinant le nœud parent à l'intérieur des outils du développeur du navigateur.

Nous pouvons clairement voir que tous les nœuds enfants (

les balises) sont en effet ajoutées dans le div avec le Demo id = ”.

Conclusion

Le .APPENDCHILD () La méthode de JavaScript est utilisée pour ajouter un nœud enfant à l'intérieur d'un nœud parent à l'aide de l'interface du nœud DOM. La manipulation des éléments de la page Web à l'aide d'un langage de script est une tâche importante. L'une des tâches courantes tout en manipulant les pages Web est d'ajouter les éléments en tant que nœuds enfants à d'autres éléments. Nous avons appris comment le .APPENDCHILD () La méthode fonctionne, sa syntaxe, et quand il est utilisé. Nous avons créé une page Web HTML, un nœud parent et des nœuds enfants annexés à l'intérieur en utilisant le .APPENDCHILD () fonction.