Médiaforma

jQuery – Modifier un élément du DOM

Print Friendly

Tapez le code suivant et sauvegardez-le dans le dossier c:\jquery sous le nom premier.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Affichage dans le DOM</title>
    <script src="jquery.js"></script>
    <script>
      $(function(){
        $('#textejq').html('Ce texte est écrit par jQuery');
      });
    </script>
  </head>
  <body>
    Ce texte est affiché en HTML<br />
    <span id="textejq"></span>
  </body>
</html>

 

Exécutez ce code dans Firefox en tapant c:/jquery/premier.htm dans la barre de titre. Voici ce que vous devez obtenir :

Le corps du document contient un peu de texte et une balise <span> :

Ce texte est affiché en HTML<br />
<span id="textejq"></span>

 

Lorsque le DOM est prêt :

$(function(){

 

Le code jQuery ajoute du texte dans la balise d’identifiant textejq :

$('#textejq').html('Ce texte est écrit par jQuery');

 

La première partie de l’instruction sélectionne la balise d’identifiant textejq :

$('#textejq')

La fonction html() ajoute alors le texte « Ce texte est écrit par jQuery » dans la balise sélectionnée.

Pour vous assurer que c’est bien jQuery qui affiche le texte « Ce texte est écrit par jQuery », mettez la ligne qui fait référence à la bibliothèque jquery.js en commentaires :

<!-- <script src="jquery.js"></script>  -->

Sauvegardez le fichier et rafraîchissez le navigateur en appuyant sur F5. La deuxième ligne n’est plus affichée. C’est donc bien jQuery qui se charge de cet affichage.

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply