Ce tutoriel décrira les méthodes pour écrire du code HTML dynamiquement en utilisant JavaScript.
Comment écrire dynamiquement du code HTML en utilisant JavaScript ?
Pour écrire du code HTML à l'aide de JavaScript, utilisez les méthodes suivantes :
Méthode 1 : écrire du code HTML dynamiquement à l'aide de la méthode document.createElement()
JavaScript ' document.createElement() ' méthode avec le ' textContent ” permet d'écrire dynamiquement un code HTML en JavaScript. À l'aide de la méthode createElement(), vous pouvez créer un certain élément HTML et la propriété textContent est utilisée pour définir le contenu du texte.
Syntaxe
Utilisez la syntaxe donnée pour créer un élément HTML en JavaScript :
document. créerÉlément ( 'tagName' )
Exemple
Ici, dans un premier temps, nous allons créer un paragraphe dans un fichier JavaScript en utilisant la balise HTML
passée dans un ' créerÉlément() ' méthode:
constante texte = document. créerÉlément ( 'p' ) ;Utilisez la propriété textContent pour définir le texte d'un paragraphe :
texte. textContent = 'Bienvenue sur Linuxhint' ;
Enfin, imprimez le texte sur la page Web en utilisant le ' document.write() ' méthode:
document. écrivez ( texte. textContent ) ;Ici, vous pouvez voir dans la sortie que nous avons réussi à écrire le texte sur la page Web en utilisant JavaScript :
Méthode 2 : écrire du code HTML dynamiquement à l'aide de la propriété innerHTML
Pour écrire du code HTML dynamiquement, utilisez le JavaScript ' innerHTML ' la propriété. C'est l'approche la plus simple pour modifier le contenu d'un élément HTML. Il prend en charge tous les navigateurs.
Syntaxe
Suivez la syntaxe donnée pour utiliser la propriété innerHTML :
innerHTML = 'texte'Exemple
Dans le fichier HTML, créez d'abord un bouton qui appellera la fonction définie ' titre() ” en JavaScript sur l'événement click :
< bouton onclick = 'titre()' > Cliquez ici bouton >Créez un paragraphe en utilisant la balise
où le texte sera affiché à partir du JavaScript et attribuez-lui un identifiant :
< identifiant p = 'titre' > p >Définir une fonction ' titre() ” dans un fichier JavaScript. Obtenez la référence de l'élément HTML en utilisant son identifiant attribué à l'aide du ' getElementById() » et appliquer une méthode « innerHTML ” propriété dessus:
en-tête de fonction ( ) {document. getElementById ( 'titre' ) . innerHTML = '
Bienvenue dans Linuxhint
' ;}
Production
Nous avons compilé toutes les informations essentielles liées à l'écriture dynamique du code HTML à l'aide de JavaScript.
Conclusion
Pour écrire du code HTML dynamiquement en JavaScript, utilisez le ' document.createElement() ' méthode avec le ' textContent « propriété » ou « innerHTML ' la propriété. Dans la première méthode, vous n'avez pas besoin de code HTML, tandis que dans la propriété innerHTML, vous devez accéder à l'élément HTML et effectuer une opération dessus. Dans ce didacticiel, nous avons décrit les méthodes pour écrire du code HTML en utilisant JavaScript de manière dynamique.