L'écriture du code HTML est facile, mais en ce qui concerne les changements dynamiques sur les pages comme l'ajout de HTML, vous devez utiliser des stratégies inhabituelles. JavaScript est une langue puissante pour faire ces types de travaux. Vous pouvez facilement utiliser JavaScript pour mettre le code HTML à l'intérieur du modèle. Nous en discuterons dans cet article.

Grâce à JavaScript, il y a deux façons d'attacher du code HTML à une balise div.

• Utilisation de la propriété innerhtml
• Insertion de HTML adjacent à l'aide de la fonction insertadjacenthtml ()

Utilisation d'attribut innerhtml

Pour utiliser la propriété InnerHTML pour attacher du code à un élément (div), choisissez d'abord l'élément (div) où vous souhaitez ajouter le code. Ensuite, en utilisant l'opérateur + = sur innerhtml, ajoutez le code enveloppé comme chaînes.

Voici la syntaxe de l'attribut.

Htmlelement.innerhtml + = "Insérez votre code ici"

Prenons un exemple de cela. Tout d'abord, nous allons faire référence à l'élément HTML en utilisant la propriété:

document.getElementById ();

Par conséquent, créons un <div> et mettre un <H1> Tag et un <bouton> à l'intérieur.

Ceci est un tutoriel LinuxHint

Paragraphe

Comme vous pouvez le voir, nous avons donné une pièce d'identité de «test» div Tag et placé le texte qui indique «paragraphe d'ajout» à l'intérieur du bouton. Avec ceux-ci, nous avons le résultat suivant à l'écran

Code javascript:

Nous avons un bouton lié à une fonction nommée «Buttonpreressed ()» dans le script. Mais, nous n'avons pas défini cette fonction, et ce bouton ne fait rien. Alors, créons cette fonction dans le script qui ajouterait un paragraphe dans cette div et compterait combien de fois nous avons ajouté ce paragraphe. Jetez un œil au code suivant.

i = 1;
const Buttonpreressed = () =>
document.getElementByid ("test").innerhtml + =
"

Yoo a ajouter ce paragraphe "+ i +" fois ";
i ++;

Remarque: nous avons créé une contre-variable «i». Ceci sera utilisé pour contrôler le nombre de fois où nous avons ajouté ce paragraphe à l'intérieur de la balise div.

Maintenant, si nous exécutons le code et appuyons sur le bouton, nous obtenons:

Note: Cette technique supprime essentiellement tout le contenu de la div et le remplace par de nouvelles choses. Tous les auditeurs liés aux nœuds enfants de cette div seront perdus en conséquence. C'est pourquoi nous le concatenons toujours.

En utilisant la méthode adjacenthtml

La fonction insertadjacenthtml () peut également être utilisée pour attacher du code HTML à un div. Cette méthode est utile lorsqu'il s'agit d'appeler HTML à un endroit spécifique. Il faut donc deux paramètres dans cette méthode:

• L'emplacement (dans le document) où le code doit être inséré («AftereBing», «AVANTBEGIN», «Afterend», «AVANT»).
  • Afterbegin - juste après l'élément HTML mentionné mais à l'intérieur de la balise.
  • AvantBegin - avant l'élément HTML mentionné
  • Afterend - Après la balise de clôture de l'élément HTML
  • AVANT - à l'intérieur de l'élément HTML mais avant la balise de clôture
• Vous devez entourer le code HTML que vous souhaitez ajouter, à l'intérieur des citations.

Ceci est la syntaxe générale de la méthode

Htmlelement.insertadjacenthtml ('EMPLACEMENT', 'CODE HTML');

Utilisons l'exemple précédent. Le même code HTML. Cependant, cette fois, le script serait léger comme:

Code HTML:

Ceci est un tutoriel LinuxHint

Paragraphe

Remarque: Puisque nous utilisons l'exemple précédent, le code HTML est exactement le même.

Code javascript:

i = 1;
Fonction ButtonPressed ()
document.getElementByid ("test").insertAdjacenthtml ("avant deBegin",
"

Annexe "+ i +" fois avant div

");
i ++;

Remarque: nous utilisons le «Avant Begin»Propriété pour ajouter le

Tag avant le début du div.

Sortir:

Voilà, vous avez appris comment pouvons-nous ajouter un code HTML via JavaScript.

Conclusion

Il existe deux méthodes que vous pouvez utiliser pour ajouter le code HTML dans une page Web. La première méthode consiste à utiliser innerhtml tandis que la deuxième méthode consiste à utiliser le Adjacenthtml méthode. Dans cet article, nous avons pris des exemples de méthodes InnerHTML et AdjacentHTML pour ajouter le code HTML dans une page Web.