oujood.com

jQuery Manipulation HTML

jQuery contient des méthodes(fonctions)  puissantes pour changer et manipuler des attributs et des éléments HTML
jQuery contient des méthodes( c'est à dire des fonctions)  puissantes pour changer et manipuler les attributs et le contenu des éléments HTML.

chercher |

jQuery Manipulation HTML

Certaines méthodes jQuery peuvent être utilisées pour assigner ou lire une valeur sur une sélection. Parmi ces méthodes, citons text(), html(), attr() et val().
Lorsque ces méthodes sont appelées sans argument, on parle de getters, car elles obtiennent (ou lisent) la valeur de l'élément.
Lorsque ces méthodes sont appelées avec une valeur en argument, on parle de setter, car elles définissent (ou assignent) cette valeur.

Changer le contenu HTML

La méthode html() définit ou renvoie le contenu (innerHTML) des éléments sélectionnés.
Lorsque cette méthode est utilisée pour renvoyer du contenu, elle renvoie le contenu du premier élément rencontré.
Lorsque cette méthode est utilisée pour définir le contenu, elle écrire le contenu dans touts les éléments rencontrés.

Syntaxe pour:p> Renvoyer le contenu :

$(selector).html()

Définir le contenu :

$(selector).html(content)

Définir le contenu à l’aide d’une fonction :

$(selector).html(function(index,currentcontent))

Exemple :modifier le contenu HTML d'un élément

L'exemple suivant vous montre comment modifier le contenu HTML des éléments p :

Sélectionner le code

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
    <title>Exemple jQuery: jQuery modifier le contenu HTML d'un élément</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").html("Apprendre JQuery par tutoriel" );	  
    });
  });
  </script>
   
  </head>
  <body>
	<h1>Exemple jQuery: jQuery modifier le contenu HTML d'un élément</h1>
    <button>Cliquez pour voir</button>
  <div>
   <p>C'est un paragraphe</p>
  <p>C'est un autre paragraphe</p>
  </div>
  </body>
  </html>             

 

Récupérer le contenu HTML avec la méthode html()

L'exemple suivant vous montre comment récupérer le contenu HTML des éléments de paragraphe ainsi que d'un élément conteneur <div> :

Code

  Copier le code

  <!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
    <title>Exemple jQuery:jQuery récupérer le contenu HTML d'un élément</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
p{border:solid 1px #000;width:200px;}
div{border:solid 1px #000;width:250px;padding:20px}
button{margin:10px}
</style>
<script>
$(document).ready(function(){
    $(".btn-one").click(function(){
        var str = $("p").html();
        alert("Voici le contenu du paragraphe:\n"+str);
    });
    $(".btn-two").click(function(){
        var str = $("#container").html();
        alert("Voici le contenu du div conteneur:\n"+str);
    });
});
</script>
</head>
<body>
 <div id="container">   <button type="button" class="btn-one">Obtenir le contenu HTML du paragraphe</button>
    <button type="button" class="btn-two">Obtenir le contenu HTML du conteneur</button>
    
        <h1>Bonjour tout le monde!</h1>
        <p>J'appreds le langage jQuery avec la site <b>oujood.com</b></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 » du contenu à l'intérieur des éléments HTML correspondants avant la première ligne.

Syntaxe :

$(Selecteur).Prepend(Content)

Exemple1 :ajout de contenu HTML à la fin d'un élément

Sélectionner le code

  <!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
    <title>Exemple jQuery: jQuery ajout de contenu HTML à élément</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").append(" avec le site: oujood.com");
    });
  });
  </script>
   
  </head>
  <body>
    <button>Cliquez pour voir</button>
  <div>
   <p>J'apprend JQuery <br>
   J'apprend JQuery</p>
  <p>C'est un autre paragraphe</p>
  </div>
  </body>
  </html>

 

Exemple 2 :jQuery ajout de contenu HTML au début d'un élément

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

Sélectionner le code

    <!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
    <title>Exemple jQuery: jQuery ajout de contenu HTML à élément</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(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</p>
  <p>C'est un autre paragraphe </p>
  </div>
  </body>
  </html>

 

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

Syntaxe :

$(Selecteur).After(Content)

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

Syntaxe :

$(Selecteur).before(Content)

Exemple1 :Ajouter du contenu html avec after()

Le code suivant ajoute un paragraphe aprés chaque paragraphe trouvé en utilisant la méthode after().

Sélectionner le code

    <!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
    <title>Exemple jQuery: jQuery ajout de contenu HTML aprés élément</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
p{border:solid 1px #000;width:200px;}
</style>
<script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").after("<p>oujood.com.</p>");
    });
  });
  </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 :Ajouter du contenu html avec before()

Le code suivant ajoute un titre de niveau h3 avant chaque paragraphe trouvé en utilisant la méthode before())

Sélectionner le code

    <!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
    <title>Exemple jQuery: jQuery ajout de contenu HTML avant un élément</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
p{border:solid 1px #000;width:200px;}
</style>
<script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").before("<h3>Bonjour je suis un nouveau titre h3</h3>");
    });
  });
  </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:
  jQuery fonctions callback
    Sommaire de :
JQuery
 Cours suivant:
jQuery manipulation css   
Par gerywa 25 juillet 2014

La méthode secrète likes sans fin sur Facebook

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.

GAGNER DE L'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe
Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci




Hébergeur Discount - Hébergement web