Insérer du HTML en javascript

Insérer du HTML en javascript



Pour insérer du HTML en javscript, rien de plus simple. Mais avant de suivre ce tutriel, 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 ce momment plusieurs méthode existe 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'abors nous allons étudier les fonctions que nous allons utiliser :

  • La fonction getElementById();, elle sert à récupérer un élement 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'élement ou l'on veut modifier le texte nous allons faire document.getElementById("ID DE L'ELEMENT"), une fois cet élement récupéré, nous allons rajouter à la fin .innerHTML = "MON TEXTE", comme expliqué précédament le innerHTML permet d'ajouter/remplacer un texte dans du code HTML, mais pour selectionner 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'abors ouvrir les balises scripts, puis y créer une fonction. Puis nous allons y rajouter le code vu précédament 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 ous 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 !

Par Clouder le 22 Apr 2018
Cette pub permet au site de vivre ...

Commentaire

Tu veux participer ?
Alors connecte toi ou inscris toi et viens participer !