Manipulation des éléments HTML via JavaScript
Cet article discutera manipuler les éléments HTML à travers Javascrip. Nous expliquerons également la procédure d'ajout d'éléments HTML, d'ajouter des éléments HTML, de modifier le contenu des éléments HTML, de trouver et d'obtenir des éléments HTML et de supprimer les éléments HTML et leurs nœuds enfants. De plus, les exemples liés à appendChild (), insertFore (), innerhtml Property, GetElementById (), GetElementByClassName (), QuerySelectorall (), retire () et removechild () 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 L'élément HTML nouvellement créé est-il 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 les éléments HTML via JavaScript en utilisant la méthode INSERTBEFORE ()
Si vous souhaitez ajouter 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 les éléments HTML via JavaScript à l'aide de la méthode INSERTBEFORE ()
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 modifier le contenu des éléments HTML via JavaScript en utilisant la propriété InnerHTML
Le DOM HTML vous permet de modifier le contenu HTML en utilisant le «innerhtml" propriété. Le "innerhtml"Est généralement utilisé dans les pages Web pour générer du contenu HTML dynamique tel que les formulaires de commentaires, les formulaires d'enregistrement et les liens.
Syntaxe de la propriété JavaScript innerhtml
élément.innerhtml = valeurIci, "élément«Est l'élément HTML que vous avez sélectionné pour modifier son contenu, et«valeur"Est le contenu que nous allons définir.
Exemple 1: Modification du contenu des éléments HTML via JavaScript
Cet exemple vous montrera comment utiliser le "innerhtml”Propriété JavaScript pour modifier le contenu d'un élément HTML. Tout d'abord, nous ajouterons un élément de cap avec le
étiquette de cap et un paragraphe avec le
Tag html:
Modifier les éléments HTML à l'aide de JavaScript
Une chaîne de test
Maintenant, nous voulons changer le contenu du «"Élément ayant l'identifiant"P1". Pour ce faire, nous utiliserons le «document.getElementById () ”Méthode pour obtenir l'élément spécifié. Après cela, nous définirons le contenu de notre
élément de "C'est Linuxhint.com»:
Nous avons changé le contenu du paragraphe ci-dessus
Consultez la sortie en tête ci-dessous, que nous avons obtenue en exécutant le programme ci-dessus:
Comment trouver et obtenir des éléments HTML par ID via JavaScript
La plupart des développeurs JavaScript ont utilisé le getElementByid () Méthode pour trouver et obtenir des éléments HTML ayant des identifiants uniques. Si vous avez passé un ID qui n'appartiens à aucun élément HTML, la méthode GetElementById () affichera la valeur nul.
Syntaxe de la méthode GetElementById ()
document.GetElementByid (EleMedId)Ici le "élémentID»Représente l'ID unique de l'élément HTML que vous souhaitez trouver et obtenir dans votre code JavaScript.
Exemple: trouver et obtenir des éléments HTML par ID via JavaScript
Dans l'exemple suivant, nous ajouterons des éléments HTML tels qu'un titre avec le
tag et trois éléments de paragraphe avec le
étiqueter. Notez que nous avons également ajouté "identifiant»Avec les éléments du paragraphe:
C'est Linuxhint.com
Trouver et obtenir des éléments HTML par ID dans JavaScript
Ceci est un programme JavaScript qui utilise la méthode "GetElementsById"
Dans l'étape suivante, nous trouverons et obtiendrons l'élément ayant l'identifiant "P1"En utilisant le"document.getElementByid ()" méthode. Après Ding ainsi, nous modifierons le contenu de l'élément HTML récupéré:
Comment trouver et obtenir des éléments HTML par ClassName via JavaScript
Le "getElementsByClassName ()«La méthode est utilisée pour trouver et obtenir des éléments HTML ayant la même classe. Lorsque vous essayez d'obtenir un élément HTML en utilisant le nom de classe, l'interprète JavaScript renverra tous les objets appartenant à la même classe. Après cela, vous pouvez effectuer des opérations spécifiques sur ces éléments HTML.
Syntaxe de GetElementsByClassName ()
document.getElementsByClassName (className)Ici le "nom du cours"Représente le nom de classe des éléments HTML que vous devez trouver et obtenir dans votre programme.
Exemple: trouver et obtenir des éléments HTML par ClassName via JavaScript
Dans l'exemple suivant, nous avons ajouté une rubrique et quelques éléments de paragraphe avec le nom de classe "C1»:
C'est Linuxhint.com
Trouver et obtenir des éléments HTML par nom de classe en javascript
Texte dans la première paragraphe
Texte dans le deuxième paragraphe
Ensuite, nous rechercherons les éléments HTML qui ont «C1«Comme classe en utilisant la méthode GetElementsByClassName () et stockera les collections des objets dans«un»:
Voici la sortie que nous avons obtenue en exécutant le programme JavaScript donné ci-dessus:
Comment trouver et obtenir des éléments HTML par le sélecteur CSS via JavaScript
En html, le queySelectorall () La méthode renvoie un objet NodeList statique qui comprend une collection d'éléments enfants d'un élément correspondant aux sélecteurs CSS spécifiés. Les numéros d'index sont utilisés pour trouver et obtenir les nœuds, à partir de 0.
Syntaxe de la méthode Queryselectorall ()
élément.QuerySelectorall (sélecteurs)La méthode QuerySelectorall () prend «sélecteurs«Comme argument; Une chaîne DOM comprend un ou plusieurs sélecteurs CSS valides.
Exemple: trouver et obtenir des éléments HTML par le sélecteur CSS via JavaScript
Dans le programme JavaScript donné ci-dessous, nous avons utilisé la méthode QueySelectorall () pour trouver et obtenir les éléments HTML paragraphes qui ont «C1"Comme nom de classe:
C'est Linuxhint.com
Trouver et obtenir des éléments HTML par nom de classe en javascript
Texte dans la première paragraphe
Texte dans le deuxième paragraphe
Découvrez la sortie de la méthode JavaScript QuerySelectorall ():
L'exécution du programme JavaScript ci-dessus affichera la sortie suivante:
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: supprimez 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 des enfants via JavaScript en utilisant 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.
Supprimer les éléments HTML de l'enfant via JavaScript en utilisant 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
Le modèle d'objet de document (DOM) dans JavaScript est une interface de développeur qui vous permet de manipuler la conception, la structure et le contenu des éléments HTML de votre site Web. Cet article a discuté de la manipulation des éléments HTML via JavaScript. Nous avons également expliqué la procédure d'ajout d'éléments HTML, d'ajouter des éléments HTML, de modifier le contenu des éléments HTML, de trouver et d'obtenir des éléments HTML et de supprimer les éléments HTML et leurs nœuds enfants. De plus, les exemples liés à APPEDCHILD (), insertFore (), InnerHTML Property, GetElementById (), GetElementsByClassName (), QuerySelectorAll (), Retire () et RemoveChild () sont également fournis.