propriété innerhtml en javascript

La propriété InnerHTML permet la manipulation du contenu HTML de diverses manières. L'innerhtml permet à l'utilisateur de définir / mettre à jour le contenu HTML ou d'obtenir le contenu d'un élément HTML. La propriété InnerHTML utilise la méthode GetElementById pour identifier l'élément et effectuer une opération pertinente.

Pour une meilleure compréhension, nous avons divisé l'article en divers morceaux pour démontrer l'utilisation de la propriété innerhtml en détail:

• Comment fonctionne la propriété innerhtml en javascript
• Comment obtenir le contenu d'un élément en utilisant la propriété innerhtml
• Comment définir le contenu d'un élément utilisant une propriété innerhtml
• Comment mettre à jour le contenu d'un élément à l'aide d'une propriété innerhtml

Comment fonctionne la propriété innerhtml en javascript

La propriété InnerHTML définit / mise à jour ou renvoie le contenu HTML d'un élément. Les deux fonctionnalités d'une propriété innerhtml ont des syntaxes différentes fournies ci-dessous.

Pour obtenir le contenu HTML:

Htmlobject.innerhtml;

Pour définir / mettre à jour le contenu HTML:

Htmlobject.innerhtml = "new-val";

Dans les syntaxes ci-dessus, le Htmlobject L'instance identifie l'élément HTML sur lequel l'InnerHTML sera appliqué. Et l'élément est identifié en utilisant le getElementbyid méthode. Tandis que le nez est toute valeur qui serait définie sur un élément HTML.

Comment utiliser la propriété innerhtml en javascript

Cette section interdit divers exemples qui démontrent l'utilisation de la propriété InnerHTML en JavaScript.

Comment utiliser la propriété InnerHTML pour mettre à jour le contenu HTML

Les extraits de code suivants démontrent le fonctionnement de la propriété InnerHTML pour mettre à jour le contenu HTML.

Html

Bienvenue à Linuxhint

Cliquez ici pour obtenir

Le code ci-dessus a un H4 élément avec id = ”H"Et un bouton avec sur clic attribut.

Javascrip

fonction get ()
alerte (document.getElementByid ("h").innerhtml);

Le code JavaScript ci-dessus crée une fonction get () et contient une alerte qui afficherait le contenu de l'élément id = ”H".

Sortir

La sortie montre que le contenu d'un élément HTML est affiché comme un contenu alerte.

Comment utiliser la propriété InnerHTML pour mettre à jour le contenu HTML

Dans cette section, vous apprendrez à mettre à jour le contenu d'un élément HTML à l'aide d'une propriété InnerHTML.

Html

Linuxhint

Cliquez ici pour mettre à jour

Le code ci-dessus crée un paragraphe ayant id = ”P1»Et un bouton avec un sur clic attribut.

Javascrip

Function Update ()
document.GetElementByid ("P1").innerhtml = "Bienvenue! La propriété innerhtml est utilisée! "

Le code JS écrit ci-dessus crée une fonction nommée mise à jour() qui sera invoqué sur le clic sur le bouton pour appliquer la propriété InnerHTML sur l'élément (paragraphe) id = ”P1".

Sortir

À partir de la sortie, il est observé que le contenu du paragraphe est mis à jour.

Comment utiliser la propriété InnerHTML pour définir le contenu HTML

Ici, nous montrerons comment InnerHTML définit le contenu d'un élément HTML. Pour cela, le code HTML et JavaScript pratiqué dans cette section est élaboré ci-dessous.

Html

C'est un paragraphe

Cliquez ici pour définir le contenu

Le code HTML ci-dessus a deux paragraphes où la valeur du premier paragraphe (id = ”P1") Sera utilisé pour définir la valeur du deuxième paragraphe (id ="P2").

Note: Le div Dans le code ci-dessus, il s'agit juste de sous-enterre.

Javascrip

fonction set ()
const old = document.GetElementByid ("P1").innerhtml;
document.GetElementByid ("P2").innerhtml = vieux;

Une fonction set () est créée qui a deux instructions. La première instruction obtient le contenu du paragraphe (id = ”P1«) Et l'enregistre dans une variable (vieux). Et la deuxième instruction définit la valeur de la variable au paragraphe (id = ”P2").

Sortir

À partir de la sortie ci-dessus, le paragraphe n'a rien à montrer mais en cliquant sur le bouton, le contenu du paragraphe (id = ”P1") Est défini sur le paragraphe (id ="P2")

Conclusion

La propriété InnerHTML de JavaScript permet d'obtenir ou de mettre à jour / définir le contenu d'un élément HTML. En utilisant la méthode GetElementById, la propriété InnerHTML identifie un élément HTML. Dans cet article, la propriété innerhtml de JavaScript est démontrée de manière brève. Chaque sous-section ici présente la fonctionnalité de la propriété InnerHTML pour obtenir, mettre à jour ou définir le contenu d'un élément HTML.