Insérer du HTML en javascript

Pour insérer du HTML en JavaScript, rien de plus simple mais avant de suivre ce tutoriel, je vous conseil d'aller voir les précédents tutoriels sur le javascript et l'HTML.

Nous allons en premier temps créer une structure HTML de base, juste un petit <h1></h1> avec un texte qui va changer quand on va cliquer sur un bouton. Nous allons également créer un identifiant pour notre titre, et ajouter le paramètre onclick="" à notre bouton.

<h1 id="montitre">Je suis un titre!</h1>
<button onclick="">Cliquez sur moi</button>

À partir de ce moment plusieurs méthodes existent pour parvenir au même résultat, nous allons en voir quelques unes.

Méthode n°1 - Tout en un !

Avec cette méthode nous allons faire le code le plus compacte, nous allons tout mettre dans notre paramètre onclick="". Mais tout d’abord nous allons étudier les fonctions que nous allons utiliser :

• La fonction getElementById();, elle sert à récupérer un élément dans votre code HTML qui possède un identifiant, dans notre cas ce sera notre titre avec l'identifiant "montitre".
• La méthode innerHTML, cette méthode va vous servir à insérer du texte dans du code HTML, nous y reviendrons plus tard.

Nous allons zoomer sur notre bouton et ajouter quelques lignes dans le onclick="". Pour récupérer l’élément ou l'on veut modifier le texte nous allons faire document.getElementById("ID DE L'ELEMENT"), une fois cet élément récupéré, nous allons rajouter à la fin .innerHTML = "MON TEXTE", comme expliqué précédemment le innerHTML permet d'ajouter/remplacer un texte dans du code HTML, mais pour sélectionner le texte à remplacer, le innerHTML doit être suivit de = "VOTRE TEXTE", voilà comment cette méthode fonctionne. Voici le code pour mieux illustrer :

<button onclick="document.getElementById('montitre').innerHTML = 'Mon nouveau titre!';">Cliquez sur moi</button>

Méthode n°2 - Avec une fonction

Pour cette deuxième méthode je n'aurais plus grand chose à vous expliquer. Il faudra tout d’abord ouvrir les balises scripts, puis y créer une fonction. Puis nous allons y rajouter le code vu précédemment pour ajouter/remplacer le texte dans un code HTML.

<script>
  function mafonction(){
    document.getElementById('montitre').innerHTML = "Mon nouveau titre!";
  }
</script>

Il nous reste plus qu'à modifier notre paramètre onclick="" dans le bouton par onclick="mafonction();" pour appeler la fonction quand le bouton sera cliqué. Mais vous me direz, à quoi sa sert de faire comme ça? En plus c'est plus long! Oui vous avez raison, mais avec cette méthode vous vous perdrez beaucoup moins dans votre code car les scripts seront beaucoup mieux rangé que si vous mettiez tout dans la balise HTML.

À retenir :

• document.getElementById('IDENTIFIANT') permet de récupérer une balise HTML grâce à son identifiant.
• ATTENTION : Les identifiants sont uniques, aucun balise ne peut avoir le même identifiant qu'une autre.
• La méthode innerHTML, permet d'insérer du texte dans du code HTML.
• ATTENTION : Après un innerHTML il y aura toujours un = "TEXTE"; pour pouvoir définir le texte qui que le innerHTML va devoir échanger.

Conclusion

Il existe beaucoup d'autres méthode pour faire ceci, je vous ai donc présenter les principales, si vous avez la moindre question n'hésitez pas à poster un commentaire