récupérer le contenu d'un div , balises y compris

Version imprimable

25/07/2012, 09h07
patrickbaras

récupérer le contenu d'un div , balises y compris
comment récupérer le contenu d'un div , balises y compris.
exemple:
Code:

1 2 3 4 <div id='monTest'> <div>mon texte</div> </div>
Code:

$('#monTest').text();

donne

Citation:

"mon texte"

Code:

$('#monTest').html();

donne

Citation:

"<div>mon texte</div>"

je voudrais récuperer

Citation:

"<div id='monTest'>
<div>mon texte</div>
</div>"

merci d'avance pour l'aide qu'il vous plaira de m'apporter.

avec une extension

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
	jQuery.fn.outerHtml=function(){
		return $('<div/>').append(this.clone()).html()
 	}
 
	$(function(){
	 	alert($('#monTest').outerHtml())
	})
</script>
</head>
<body>
<div id='monTest'>
	<div>mon texte</div>
</div>

25/07/2012, 09h47
patrickbaras

merci
mais dans mon exemple c'est un <div> mais je pensai a une solution plus générale qui fonctionnerai avec toutes les balises

j'ai trouvé

Code:

$("#montest")[0].outerHTML

qui retourne ce que je voulais

merci de votre aide

Ce serait bien que tu essayes au moins le code proposé ...
Mon extension fonctionne avec tout type de balise ...
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <script type="text/javascript"> jQuery.fn.outerHtml=function(){ return $('<div/>').append($(this).clone(true)).html() } $(function(){ $('.monTest').each(function(){ alert($(this).outerHtml()) }) }) </script> </head> <body> <div class='monTest'> <div>mon texte</div> </div> <fieldset class='monTest'> <div>mon texte</div> </fieldset> <span class='monTest'> <div>mon texte</div> </span>
Pour ce qui est de ta solution

Code:

$("#montest")[0]

te permet de retourner au niveau du DOM en ressortant dont de la collection JQUERY et de retomber sur les méthodes natives de javascript

Personnellement j'ai tésté le outerHTML de javascript et il n'est pas crossbrowser ...

Après à toi de voir ton besoin ..

25/07/2012, 11h52
patrickbaras

merci pour ton code il me sera certainement utile dans d'autre cas
mais d'une selection sur un ID
je passe a une selection sur une CLASS

dans mon exemple j'ai simplifié

mais je peux aussi avoir besoin de retrouver par exemple:

Code:

<a href='' id='...'></a>

ou

Code:

<p id='...'></p>

effectivement ma solution n'est pas compatible avec tt les browsers
mais comme il s'agit d'une application intranet je peux me permettre ce genre d'incompatibilité

Tu es juste désépérant ...
Rien a voir avec l'id ou la classe ...
c'était juste un exemple, mais à priori je t'ai perdu en route

voici avec des id ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<script type="text/javascript">
	jQuery.fn.outerHtml=function(){
		return $('<div/>').append($(this).clone(true)).html()
 
 	}
 
	$(function(){
 	 alert( $('#monTest1').outerHtml()) ;
    alert( $('#monTest2').outerHtml()) 
    alert( $('#monTest3').outerHtml()) 
alert( $('#monTest4').outerHtml()) 
    alert( $('#monTest5').outerHtml()) 
 
  $('[id^=monTest]').each( function(){
  alert('dans une boucle aussi \n' +$(this).outerHtml())
  })
 
 
	})
</script>
</head>
<body>
<div id='monTest1'>
	<div>mon texte</div>
</div>
<fieldset id='monTest2'>
	<div>mon texte</div>
</fieldset>
<span id='monTest3'>
	<div>mon texte</div>
</span>
<a id="monTest4">un lien href</a>
<p id="monTest5">une balise p</p>

[edit] j'ai rajouté une balise a et une balise p pour te rassurer ...

25/07/2012, 15h10
patrickbaras

Désolé pour le désespoir provoqué.
Je ne fait du jquery que depuis le début de la semaine.
25/07/2012, 15h27
SpaceFrog

cela ne t'empêche pas au moins de tester les codes fournis ...

bonjour:
j'ai essayé et modifié ton code pour qu'il fonctionne comme $("#montest")[0].outerHTML
c-a-d récuperer le code mais aussi pouvoir le changer
Code:

1 2 3 4 5 6 7 8 9 10 11 jQuery.fn.outerHTML=function(param){ if(param!='' && param!=null) { $(this).replaceWith(param); return true; }else{ return $('<div/>').append($(this).clone(true)).html() } return false; }
Code:

alert($("#madiv2").outerHTML());

retourne le contenu

Code:

$("#madiv2").outerHTML("<h1>test</h1>");

change le contenu

merci pour ton aide

Cela ne fonctionnera pas comme html(), tu n epourras pas retourner l'element en fin de fonction afin de pouvoir chainer les fonctions comme ceci par exemple

Code:

$("#h3").outerHTML("<h1>hello world</h1>").css('color','red');

tu ne peux que modifier l'élément, mais pas le retourner car tu ne peux pas changer le this au sein de la fonction et le retourner modifié
Ceci ne retourne pas l'element
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <script type='text/javascript'> jQuery.fn.outerHTML=function(param){ if(param!='' && param!=null) { return $(this).replaceWith(param); } else{ return $('<div/>').append($(this).clone(true)).html() } } $(function(){ $("#h3").outerHTML("<h1>hello world</h1>").css({'color':'red'}); }) </script> </head> <body> <h3 id="h3">test</h3> </body> </html>
C'est d'ailleurs a mon avis pour cela que outerHTML n'existe pas en Jquery