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.

Cet article discutera de la procédure de modification des éléments HTML à l'aide de JavaScript. De plus, les exemples liés à l'utilisation de la propriété innerhtml seront également démontrés dans cet article. Alors, commençons!

Syntaxe de la propriété JavaScript innerhtml

élément.innerhtml = valeur

Ici, "é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 des éléments HTML à l'aide de 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

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:

Consultez la sortie en tête ci-dessous, que nous avons obtenue en exécutant le programme ci-dessus:

Exemple 2: Modification des éléments HTML à l'aide de JavaScript

Dans l'exemple précédent, nous avons changé le contenu de l'élément de paragraphe. Maintenant, nous rédigerons un programme JavaScript pour modifier le contenu de l'élément HTML de titre.

Comme vous pouvez le voir, nous avons ajouté une rubrique avec le

Tag avec id "id1"Avoir le contenu"L'ancien titre javascript»:

L'ancien titre javascript

Dans la prochaine étape, nous créerons une variable d'élément qui invoquera le «document.getElementByid ()"Méthode pour obtenir l'élément de cap avec l'ID"id1»:

Ce programme a changé l'ancien titre JavaScript "en" le nouveau titre JavaScript "

La sortie divisée ci-dessous signifie que le contenu de l'élément HTML en titre est modifié maintenant:

Exemple 3: Modification des éléments HTML à l'aide de JavaScript

Vous pouvez également modifier le contenu des multiples éléments HTML à la fois. Pour vous démontrer comment procéder, nous ajouterons trois éléments HTML, un titre avec le

Tag, un paragraphe avec la balise et un élément HTML de division de contenu avec la balise:

Modifier les éléments HTML à l'aide de JavaScript

C'est le premier élément p.

Ceci est le premier élément div.

Maintenant, nous allons modifier le contenu de l'élément de paragraphe avec l'ID "P1»Et élément de division de contenu avec«div" identifiant:

Jetez un œil à la sortie de notre programme JavaScript:

Exemple 4: Modification des éléments HTML à l'aide de JavaScript

Vous pouvez également supprimer le contenu d'un élément HTML en utilisant le javascript "innerhtml" propriété. Dans le code JavaScript suivant, nous avons ajouté un élément de paragraphe avec le "démo" identifiant:

Cliquez sur le bouton ci-dessous pour supprimer le contenu HTML

Dans l'étape suivante, nous ajouterons un bouton et attacherons un "sur clic”L'auditeur de l'événement. Quand nous cliquerons sur "Supprimer«Bouton, il invoquera le«myFunction ()»Méthode pour supprimer le contenu de

Élément HTML:

Supprimer

Enfin, nous définirons le «myFunction ()«Méthode comme suit:

L'exécution du programme ci-dessus vous montrera la sortie suivante. Clique sur le "Supprimer”Bouton Pour supprimer le contenu de l'élément HTML paragraphe:

Comme vous pouvez le voir, le «innerhtml»Propriété du

L'élément HTML est maintenant défini sur vide:

Conclusion

Le innerhtml La propriété HTML DOM est utilisée pour modifier le contenu des éléments HTML en JavaScript. Il peut également être utilisé pour écrire le HTML dynamique sur le document HTML, tels que des liens, des formulaires de commentaires et des formulaires d'enregistrement. Cet article a discuté de la procédure de modification des éléments HTML à l'aide de JavaScript. De plus, des exemples liés à l'utilisation de la propriété HTML InnerHTML sont également démontrés dans cet article.