Web-tutoriel

Tutoriels javascript css php java jquery

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>

16 Reponses à “Récupérer le contenu texte ou HTML d’un élément HTML avec Jquery
Le 22 décembre 2011 à 14 h 35 min
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.

Le 22 décembre 2011 à 14 h 50 min
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 …

Le 11 mars 2012 à 14 h 51 min
Oris a dit:

@Furax: Encore un soit disant programmeur qui ramène sa fraise pour rien dire. Go sur le site Jquery.

Le 11 mars 2012 à 15 h 48 min
Nicolo a dit:

@Oris: En effet 😉

Le 25 mai 2012 à 9 h 16 min
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

Le 25 mai 2012 à 10 h 22 min
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 …

Le 26 mai 2012 à 9 h 19 min
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

Le 6 juin 2012 à 17 h 17 min
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();

Le 10 mars 2013 à 0 h 58 min
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!!!

Le 11 mars 2013 à 11 h 13 min
Nicolo a dit:

Ouaip ya des jours comme ça où on tombe sur des gens sympathiquement agressifs sans avoir rien demandé 😉

Le 14 mai 2013 à 10 h 23 min
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.

Le 14 mai 2013 à 10 h 51 min
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);
});

Le 14 mai 2013 à 13 h 29 min
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

Le 4 juin 2014 à 15 h 09 min
Alsathot a dit:

merci pour ces précisions !

Le 22 octobre 2015 à 11 h 02 min
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);

Le 9 novembre 2015 à 13 h 47 min
Nicolo a dit:

Il vous suffit d’encapsuler ce calcul de la manière suivante :
$("input").on('change', function() {
===== LE CODE ICI =====
});

Laissez une réponse

Nom (requis)

Email (requis)

Site Web

Haut