Comment modifier le contenu de l'élément HTML dans JavaScript

L'acronyme HTML de Hyper Text Mark Up Language est utilisé pour créer une structure de pages Web que vous voyez sur Internet tous les jours. Pendant ce temps, JavaScript est un langage de script bien connu utilisé pour effectuer des opérations dynamiques sur les pages Web pour les rendre plus interactifs.

Une fonction HTML intéressante est HTML DOM court pour le modèle d'objet de document. Il s'agit d'une API de programmation pour les documents HTML et XML. Il est essentiellement utilisé pour fournir une structure logique aux documents. Il définit comment un document HTML peut être évalué et manipulé. Il permet à JavaScript de modifier le contenu des éléments HTML.

Dans cet article, nous discuterons:

1. Modification du contenu des éléments HTML à l'aide de JavaScript
2. Altération de la valeur d'attribut HTML à l'aide de JavaScript
3. Utilisation du document.Méthode écrite ()

Modification du contenu des éléments HTML à l'aide de JavaScript

La propriété InnerHTML est l'approche la plus rapide pour modifier le contenu des éléments HTML. Il est expliqué en détail ci-dessous:

propriété innerhtml

La propriété InnerHTML modifie le contenu d'un élément HTML. Afin d'utiliser cette méthode, utilisez la syntaxe suivante.

Syntaxe de l'utilisation d'innerhtml

Voyons la propriété innerhtml avec un exemple.

Exemple 1

C'est un paragraphe

Le paragraphe ci-dessus a été modifié par la propriété innerhtml

Dans l'exemple ci-dessus, nous manipulons le

élément en utilisant la propriété JavaScript InnerHTML. Le paragraphe a un id = "para1". Le DOM HTML utilise cet ID pour obtenir l'élément particulier, puis modifier le contenu de

Tag utilisant une propriété innerhtml. De cette façon, l'ancien paragraphe est écrasé par le nouveau paragraphe. La sortie de l'exemple ci-dessus est la suivante:

Nous pouvons également modifier les éléments en utilisant cette méthode. Permet de faire un exemple dans lequel la propriété innerhtml modifie le

élément utilisant son identifiant.

Exemple 2

Permet de changer cette rubrique

L'ancien titre a été changé

Dans l'exemple ci-dessus, Html Dom utilise le id = ”head2" pour obtenir le

l'élément et la propriété innerhtml modifie le contenu de l'élément. La sortie est la suivante.

Maintenant, discutons de la façon dont nous pouvons modifier la valeur d'un attribut HTML à l'aide de JavaScript.

Modification de la valeur d'attribut

En utilisant le nom d'attribut, nous pouvons modifier la valeur de l'attribut HTML.

Syntaxe

La syntaxe est illustrée ci-dessous:

document.getElementByid (id).attribut = nouvelle valeur

Permet de démontrer la syntaxe ci-dessus en utilisant un exemple approprié.

L'image du chien est changée en image de chat

Dans l'exemple ci-dessus, HTML DOM obtient l'élément IMG par id = ”Image1" puis l'attribut JavaScript SRC est.jpg à un catpic.jpg.

Passant à la dernière méthode qui est un document.Méthode écrite ().

document.écrire()

document.write () est utilisé pour écrire des expressions HTML ou du code JavaScript directement dans le flux de sortie HTML. Il écrasera le document si vous utilisez cette méthode après le chargement du document HTML. Essayons un exemple.

C'est un paragraphe

C'est un autre paragraphe

Dans l'exemple ci-dessus, le document.La méthode écrite () montre la hauteur de l'écran de la fenêtre comme sortie.

Conclusion

HTML DOM fournit certaines propriétés qui permettent à JavaScript de modifier le contenu des éléments HTML. Afin de modifier le contenu des éléments HTML, la propriété innerhtml () est utilisée. Vous pouvez également modifier la valeur d'attribut des éléments HTML en utilisant directement le nom d'attribut. En attendant, le document.La propriété écrite () est utilisée pour écrire des expressions HTML ou du code JavaScript directement dans le flux de sortie HTML. Cet article traite de ces propriétés en détail avec des exemples pertinents.