Définir le contenu et les attributs jQuery

Définir le contenu - text(), html() et val()

Nous utiliserons les trois mêmes méthodes de la section précédente pour définir le contenu :

  • text() - Définir ou retourner le contenu texte de l'élément sélectionné
  • html() - Définir ou retourner le contenu de l'élément sélectionné (y compris les balises HTML)
  • val() - Définir ou retourner la valeur du champ de formulaire

L'exemple suivant montre comment définir le contenu à l'aide des méthodes text(), html() et val() :

Exemple

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

Essayer vous-même

Fonction de rappel de text(), html() et val()

Les trois méthodes jQuery suivantes : text(), html() et val() possèdent également des fonctions de rappel. Les fonctions de rappel sont définies par deux paramètres : l'index de l'élément courant dans la liste des éléments sélectionnés, ainsi que la valeur originale (ancienne). Ensuite, retournez la chaîne de caractères que vous souhaitez utiliser en tant que nouvelle valeur de la fonction.

L'exemple suivant montre la méthode text() et html() avec une fonction de rappel :

Exemple

$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    return "Ancien texte: " + origText + " Nouveau texte: Hello world!
    (index: " + i + ")";
  });
});
$("#btn2").click(function(){
  $("#test2").html(function(i,origText){
    return "Ancien html: " + origText + " Nouveau html: Hello <b>world!</b>
    (index: " + i + ")";
  });
});

Essayer vous-même

Définir l'attribut - attr()

La méthode jQuery attr() est également utilisée pour définir ou modifier la valeur de l'attribut.

L'exemple suivant montre comment modifier (définir) la valeur de l'attribut href d'un lien :

Exemple

$("button").click(function(){
  $("#w3s").attr("href","http://www.codew3c.com/jquery");
});

Essayer vous-même

La méthode attr() permet également de définir plusieurs attributs simultanément.

L'exemple suivant montre comment définir simultanément les attributs href et title :

Exemple

$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.codew3c.com/jquery",
    "title" : "CodeW3C.com Tutoriel jQuery"
  });
});

Essayer vous-même

Fonction de rappel attr()

La méthode jQuery attr() propose également une fonction de rappel. La fonction de rappel prend deux paramètres : l'index de l'élément courant dans la liste des éléments sélectionnés, et la valeur (ancienne). Ensuite, retournez la chaîne de caractères que vous souhaitez utiliser en tant que nouvelle valeur de la fonction.

L'exemple suivant montre la méthode attr() avec une fonction de rappel :

Exemple

$("button").click(function(){
  $("#w3s").attr("href", function(i,origValue){
    return origValue + "/jquery";
  });
});

Essayer vous-même

Manuel de référence jQuery HTML

Pour obtenir le contenu complet des méthodes jQuery HTML, veuillez consulter le manuel de référence suivant :