Comment ajouter ou supprimer des éléments HTML via JavaScript
Cet article discutera des procédures d'ajout ou de supprimer Éléments HTML à travers Javascrip. Nous allons également démontrer l'utilisation des méthodes appenchild () et insertfore () pour ajouter les éléments HTML. De plus, des exemples liés aux méthodes de supprimer () et de removechild () pour supprimer les éléments HTML vous seront fournis. Alors, commençons!
Comment ajouter des éléments HTML via JavaScript à l'aide de la méthode APPENDCHILD ()
La méthode javascript appendChild () est utilisée pour ajouter un élément HTML comme enfant du nœud parent spécifié. Cette méthode est utilisée pour déplacer les éléments HTML.
Syntaxe de la méthode appenchild ()
norme parentale.APPENDCHILD (ChildNode);Ici le norme parentale est l'élément HTML que nous voulons déclarer en tant que parent, tandis que le infil est l'élément HTML nouvellement créé qui sera ajouté au nœud parent.
Exemple: comment ajouter des éléments HTML via JavaScript à l'aide de la méthode APPENDCHILD ()
Dans cet exemple, nous vous montrerons comment utiliser le «APPENDCHILD ()”Méthode pour ajouter les éléments HTML via JavaScript. Tout d'abord, nous ajouterons un titre et un paragraphe en utilisant le
et
Éléments HTML:
C'est Linuxhint.com
Ajout d'éléments HTML via JavaScript.
C'est le paragraphe principal.
C'est le deuxième paragraphe.
À l'étape suivante, nous créerons un nouveau
élément "paragraphe"En utilisant le"CreateElement ()”Méthode de l'objet de document:
Exécutez le programme donné ci-dessus dans votre éditeur de code préféré ou tout autre bac à sable codant en ligne; Cependant, nous utiliserons le JSBIN à cet effet:
Comme vous pouvez le voir à partir de la sortie ci-dessous, un nouvel élément HTML est ajouté avec le contenu texte "C'est un nouveau nœud»:
Comment ajouter des éléments HTML via JavaScript en utilisant la méthode INSERTBEFORE ()
Si vous souhaitez insérer un élément HTML en tant que nœud enfant avant le nœud spécifié, vous pouvez invoquer le «insertFore ()”Méthode JavaScript.
Syntaxe de la méthode insertMethod ()
norme parentale.insertFore (newNode, existantNode);Ici le "newnode"Est l'élément HTML nouvellement créé que vous souhaitez ajouter"Node existant«Est l'élément avant lequel vous insérez votre élément HTML, et le«norme parentale«Est l'élément HTML que vous avez spécifié comme nœud parent.
Exemple: comment ajouter des éléments HTML via JavaScript en utilisant la méthode insertfore ()
Dans l'exemple précédent, nous avons utilisé la méthode APPEDCHILD () pour ajouter le nouvel élément HTML comme dernier enfant du parent HTML. Cependant, vous pouvez également utiliser le javascript "insertFore ()”Méthode pour ajouter un élément HTML avant l'élément spécifié. L'exemple ci-dessous vous apprendra l'utilisation de «insertFore ()" méthode.
Tout d'abord, nous ajouterons un titre et quelques paragraphes comme suit:
C'est Linuxhint.com
Ajout d'éléments HTML via JavaScript.
C'est le paragraphe principal.
C'est le deuxième paragraphe.
Ensuite, nous créerons un nouvel élément "paragraphe”Élément HTML, puis définissez un nœud de texte enfant pour lui:
L'exécution du programme ci-dessus ajoutera le «paragraphe"Html avant"P1»:
Comment supprimer les éléments HTML via JavaScript à l'aide de la méthode supprime ()
Le javascript "retirer()«La méthode est utilisée pour supprimer l'élément HTML spécifié du modèle d'objet de document (DOM).
Syntaxe de la méthode de supprimer ()
nœud.retirer()Ici, "nœud»Représente l'élément HTML que vous souhaitez supprimer via JavaScript.
Exemple: comment supprimer les éléments HTML via JavaScript à l'aide de la méthode supprime ()
Dans la donnée ci-dessous, nous avons ajouté un élément HTML de cap, un paragraphe
et un élément qui comprend deux paragraphes et comme nœuds enfants:
C'est Linuxhint.com
Ajout d'éléments HTML via JavaScript.
C'est le paragraphe principal.
C'est le deuxième paragraphe.
Ensuite, nous allons ajouter un bouton et joindre un "sur clic" gestionnaire d'événements. Selon le code suivant, lorsque nous cliquerons sur le "Supprimer«Bouton, il invoquera le«myFunction ()" méthode:
Dans le "myFunction ()»Méthode, premièrement, nous utilisons le«document.getElementbyid«Pour trouver l'élément que nous voulons supprimer en spécifiant son«identifiant", Alors nous invoquerons le"retirer()" méthode:
La sortie divisée ci-dessous signifie que «P1»HTML est supprimé de notre programme JavaScript avec l'aide du«retirer()" fonction:
Comment supprimer les éléments HTML via JavaScript à l'aide de la méthode Removechild ()
En JavaScript, le «removechild ()»Est utilisé pour supprimer un nœud HTML enfant spécifique à partir d'un élément HTML.
Syntaxe de la méthode rerovechild ()
norme parentale.Removchild (ChildNode)Ici, le ParentNode est l'élément HTML que nous avons spécifié comme «parent”Node, et ChildNode est l'élément HTML que nous voulons supprimer de l'élément parent.
Exemple: comment supprimer les éléments HTML via JavaScript à l'aide de la méthode RemoveChild ()
Dans cet exemple, nous essaierons de supprimer l'élément enfant de notre élément HTML défini:
C'est Linuxhint.com
Ajout d'éléments HTML via JavaScript.
C'est le paragraphe principal.
C'est le deuxième paragraphe.
Pour supprimer un élément enfant, tout d'abord, vous devez créer un «parent”Élément HTML et spécifiez l'élément HTML agissant en tant que parent dans votre code JavaScript. Dans notre cas, nous avons ajouté "div1»:
Comme vous pouvez le voir que l'élément enfant de l'élément HTML est supprimé avec succès:
Conclusion
Pour ajouter un élément HTML dans votre programme JavaScript, vous pouvez utiliser la méthode APPEDCHILD () et INSERTBEFORE (), tandis que, pour supprimer tout élément HTML spécifique ou un nœud HTML enfant, retire () et reposechild () sont utilisés en fonction de votre exigences. Cet article a discuté de la façon d'ajouter ou de supprimer les éléments HTML via JavaScript. Nous avons également démontré l'utilisation des méthodes appenchild () et insertfore () pour ajouter les éléments HTML. De plus, des exemples liés à la suppression () et à la suppression () pour supprimer les éléments HTML sont également fournis dans cet article.