jQuery Manipulation HTML

jQuery contient des méthodes( fonctions)  puissantes pour changer et manipuler des attributs et des éléments HTML.

jQuery Manipulation HTML

jQuery cours tutorial

Changer le contenu HTML

La méthode  html() modifie le contenu (innerHTML) de faire correspondre les éléments HTML.

Syntaxe :

$(Selecteur).html(Content)

Exemple :

Sélectionner le code


  <!DOCTYPE html>
   <html lang="en">
   <head>
        <meta charset="utf-8">
     <title>jQuery demo sélecteur</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("button").click(function(){
      $("p").html("Apprendre JQuery par tutoriel");
    });
  });
  </script>
   
  </head>
  <body>
    <button>Cliquez pour voir</button>
  <div>
   <p>C'est un paragraphe</p>
  <p>C'est un autre paragraphe</p>
  </div>
  </body>
  </html>               

 

Ajout de contenu HTML

La méthode append() ajoute le contenu à l'intérieur  des éléments HTML correspondants après la dernière ligne.

Syntaxe :

$(Selecteur).Append(Content)

La méthode prepend() « ajoute » contenu à l'intérieur des éléments HTML correspondants avant la première ligne.

Syntaxe :

$(Selecteur).Prepend(Content)

Exemple1 :

Sélectionner le code

  <!DOCTYPE html>
   <html lang="en">
   <head>
        <meta charset="utf-8">
     <title>jQuery demo sélecteur</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("button").click(function(){
      $("p").append("
  <b>apprendre-creer-sites.com</b>.");
    });
  });
  </script>
   
  </head>
  <body>
    <button>Cliquez pour voir</button>
  <div>
   <p>J'apprend JQuery avec le site </p>
  <p>C'est un autre paragraphe</p>
  </div>
  </body>
  </html>

 

Exemple 2 :

Sélectionner le code

  <!DOCTYPE html>
   <html lang="en">
   <head>
        <meta charset="utf-8">
     <title>jQuery demo sélecteur</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("button").click(function(){
      $("p").prepend("<b>Hello world!</b> ");
    });
  });
  </script>
   
  </head>
  <body>
    <button>Cliquez pour voir</button>
  <div>
   <p>J'apprend JQuery avec le site </p>
  <p>C'est un autre paragraphe </p>
  </div>
  </body>
  </html>

 

La méthode after() insère contenu HTML après les éléments correspondants.

Syntaxe :

$(Selecteur).After(Content)

La méthode before() insère le contenu HTML avant  les éléments correspondants.

Syntaxe :

$(Selecteur).before(Content)

Exemple1 :avec after()

Sélectionner le code

  <!DOCTYPE html>
   <html lang="en">
   <head>
        <meta charset="utf-8">
     <title>jQuery demo sélecteur</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("button").click(function(){
      $("p").after("Apprendre-creer-sites.com.");
    });
  });
  </script>
   
  </head>
  <body>
    <button>Cliquez pour voir</button>
  <div>
   <p>J'apprend JQuery avec le site </p>
  <p>C'est un autre paragraphe </p>
  </div>
  </body>
  </html>

 

Exemple2 :avec before()

Sélectionner le code

  <!DOCTYPE html>
   <html lang="en">
   <head>
        <meta charset="utf-8">
     <title>jQuery demo sélecteur</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("button").click(function(){
      $("p").before("Bonjour,");
    });
  });
  </script>
   
  </head>
  <body>
    <button>Cliquez pour voir</button>
  <div>
   <p>J'apprend JQuery  </p>
  <p>C'est un autre paragraphe </p>
  </div>
  </body>
  </html>

 

Pour une référence complète jQuery HTML, veuillez vous rendre à nos référence méthodes de jQuery HTML .




Cours precedent:
cours precedent  jQuery fonctions callback
    Sommaire de :
JQuery
 Cours suivant:
jQuery manipulation css    cours suivant
Par gerywa 25 juillet 2014