Récupérer le contenu texte ou HTML d’un élément HTML avec Jquery 31 janvier , 2010
Ce mini tutoriel vous indique comment récupérer le contenu HTML ou texte d’un élément HTML à l’aide de jquery.
Prenons l’exemple HTML suivant :
<div class="contenu" id="mes-liens"> Le contenu <a id="lien-xenetis" href="http://www.xenetis.org">Xenetis.org</a> </div> |
Récupérons le contenu HTML du DIV « mes-liens » :
var mon-contenu = $("#mes-liens").html(); |
Aura pour résultat :
Le contenu
<a id="lien-xenetis" href="http://www.xenetis.org">Xenetis.org</a> |
Si on veut récupérer seulement le texte on utilisera :
var mon-contenu = $("#mes-liens").text(); |
On aura pour résultat :
Le contenu Xenetis.org |
Il est aussi possible de récupérer la valeur d’un élément INPUT.
Prenons l’exemple suivant :
<input type="text" name="mon-champ" id="mon-champ" value="ma valeur"> |
Pour récupérer la valeur de l’INPUT:
var ma-variable = $("#mon-champ").val(); |
Pour attribuer une valeur, il suffit de la fournir à la fonction val :
$("#mon-champ").val("ma nouvelle valeur"); |
Cela fonctionne aussi avec la fonction html:
<div id="contenu"> </div> |
On assigne le contenu suivant au div ajant pour id : contenu
$("#contenu").html('<a id="lien-xenetis" href="http://www.xenetis.org">Xenetis.org</a>'); |
<div id="contenu"> <a id="lien-xenetis" href="http://www.xenetis.org">Xenetis.org</a> </div> |
Laissez une réponse
furax a dit:
ça plante puisque $ n’est pas défini . Tu devrais rejoindre la grande communauté de deficient de « comment ça m.. .net »
marre des programmeurs qui ne savent surtout rien sur tout et qui n’étalent que des inepties sur le net.
Nicolo a dit:
Si t’étais moins con, tu te rendrais compte que le tutoriel s’appelle :
« Récupérer le contenu texte ou HTML d’un élément HTML avec Jquery »
« Avec Jquery » signifie qu’il est nécessaire de loader la librairie de jquery avant …
Oris a dit:
@Furax: Encore un soit disant programmeur qui ramène sa fraise pour rien dire. Go sur le site Jquery.
Nicolo a dit:
@Oris: En effet 😉
phylo a dit:
j’aimerai savoir s’il est possible d’envoyer ce contenu dans une autre page .Je m’explique Supposons que le contenu de la div soit un ensemble d’images superposées( grâce aux z-index de css) et qu’on aimerait envoyer cet ensemble dans une autre page comme une seule image Es-ce possible?merci
Nicolo a dit:
Avec ce script vous pourrez récupérer le div contenant les images, mais si ces images s’affichent avec un z-index en css, il faudra récupérer aussi le css de ces images.
De plus ce script ne fait que récupérer du code dans une page, il ne permet de fusionner les images entre elles …
phylo a dit:
merci pour ta réponse Nicolo Pour la fusion des images j’ai utilisé justement la propriété Z-index pour chaque image. une fois fusionnées et empaquetées dans ma div j’aimerai envoyer le contenu de ma div
Nicolo a dit:
Admettons que ta div ait comme id : madiv
Tu peux récupérer le contenu complet de ta div par : $(‘#madiv’).html();
Fred a dit:
Il est préférable de mettre des noms de variables ainsi $maVariable pour mieux distinguer les variables Jquery avec $. Le venin de De Mister Furax est totalement injustifié.
Delete $Furax;
Mouahahahahahahahahaha!!!
Nicolo a dit:
Ouaip ya des jours comme ça où on tombe sur des gens sympathiquement agressifs sans avoir rien demandé 😉
Alouani a dit:
Bonjour,
Je veux récupérer un mot survolé dans ma page web en jquery dans n’importe quel element de la page(div,a,p… ).Ya quelqu’un qui peut m’aider en ça?!
Merci infiniment.
Nicolo a dit:
Salut,
Je ne sais pas si tu peux copier directement dans le presse papier en JS par contre si c’est pour le coller ensuite dans élément particulier tu peux faire un truc dans le genre :
Admettons que tu veuilles copier le contenu des < p > au survole :
var monTemp = « »;
$(« p »).hover(function() {
monTemp = $(this).html();
});
Et le coller dans un élement particulier par exemple au double click sur un input #target :
$(‘#target’).dblclick(function() {
$(this).val(monTemp);
});
Alouani a dit:
Bonjour,
je veous remercie pour votre reponse.
mais ce que je cherche c’est une olution qui récupére le mot survolé dans tout le document html pour l’envoyer apres via une requete ajax et effectuer des traitement la desssu.et réafficher a l’utilisateur dans le meme docuemnt.
Moi, je sais comment récupérer le texte dans un selecteur particulier du documetn html et cea se fait
$(« selecteur »).text();
mais mn problème ici c’est d’avoir que le mot concerné pas plus.
Vous voyez ce ke je veux dire?!!!
help plz
Alsathot a dit:
merci pour ces précisions !
Luis a dit:
Bonjour.
J’ai plutôt une question qu’une réponse. J’ai 2 éléments input dont je récupère les valeurs, je multiplie la première par la seconde et l’affiche dans une div. Jusque là tout va bien, ça s’affiche correctement.
Par défaut input1 vaut 1 et input2 est vide donc le résultat est 0.
Seulement, quand je change la valeur des inputs, je voudrais que le résultat se mette à jour automatiquement dans la div sans avoir à valider le formulaire.
Comment dois-je m’y prendre ?
voilà mon code :
var input1= $(‘#input1’).val();
var input2= $(‘#input2’).val();
var result = input1*input2;
$(‘#tarifT’).text(result);
Nicolo a dit:
Il vous suffit d’encapsuler ce calcul de la manière suivante :
$("input").on('change', function() {===== LE CODE ICI =====
});