Insérer du HTML dans une div - javascript

Dans de nombreux cas, il est nécessaire d'ajouter des données dynamiquement sur les sites Web, comme sur les forums de médias sociaux, les magasins en ligne, les sites Web d'information, les tableaux de bord, etc. Plus précisément, tout site Web affichant des données ou du contenu modifiés peut nécessiter des mises à jour dynamiques à l'aide de JavaScript ou d'autres outils de développement Web.

Cet article décrira comment insérer un HTML dans un élément div dans JavaScript.

Comment insérer HTML dans une div en utilisant JavaScript?

Comme JavaScript est un langage dynamique et est utilisé dynamiquement. Ainsi, à cette fin, utilisez les attributs pré-construits JavaScript. Pour insérer un HTML dans une div, utilisez les approches suivantes:

• propriété innerhtml
• propriété en texte

Méthode 1: Insérez HTML dans une div en utilisant la propriété «InnerHTML»

Utilisez le "innerhtml»Propriété pour insérer le HTML dans un div. Il peut récupérer le contenu HTML d'un élément en tant que chaîne ou définir un nouveau contenu HTML pour un élément, y compris des balises de texte ou HTML.

Syntaxe

Utilisez la syntaxe donnée pour la propriété InnerHTML pour ajouter HTML dans une div dans JavaScript:

élément.innerhtml

Exemple

Créez un div dans un élément HTML à l'aide de la balise et associez un ID "insert"

Dans un fichier JavaScript ou la balise, obtenez la référence de l'élément div en utilisant son ID attribué et utilisez le "innerhtml”Attribut pour définir le texte avec le lien d'ancrage:

document.getElementByid ("insertText").innerhtml = "Bienvenue à Linuxhint";

Comme vous pouvez le voir que le texte avec le lien a été inséré avec succès sur la page à l'aide du javascript:

Méthode 2: Insérez HTML dans une div en utilisant la propriété «InnerText»

Une autre façon d'insérer du HTML dans une div est d'utiliser le «texte de texte" propriété. Il peut obtenir / récupérer le contenu texte de l'élément HTML ou définir un nouveau contenu texte pour un élément HTML.

Syntaxe

Utilisez la syntaxe suivante pour la propriété InnerText:

élément.texte de texte

Exemple

Ici, nous ajouterons le texte dans l'élément div à l'aide de l'attribut InnerText:

document.getElementByid ("insertText").innerText = "hy! J'inserte dans cette div en utilisant la propriété «InnerText» »;

Sortir

Il s'agit d'insertion de HTML dans une div en utilisant JavaScript.

Conclusion

Pour insérer des balises HTML et du texte dans un élément HTML Div, utilisez le «innerhtml”Propriété, et pour insérer uniquement du texte sur l'élément div, utilisez le"texte de texte" propriété. Cet article a décrit les moyens d'insérer un HTML dans une div en utilisant JavaScript.