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

**patrickbaras** · 25/07/2012, 09h07

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

donne

"mon texte"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

donne

"<div>mon texte</div>"

je voudrais récuperer

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

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

**SpaceFrog** · 25/07/2012, 09h23

avec une extension

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**patrickbaras** · 25/07/2012, 09h47

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

qui retourne ce que je voulais

merci de votre aide

**SpaceFrog** · 25/07/2012, 09h55

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#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 ..

**patrickbaras** · 25/07/2012, 11h52

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<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é

**SpaceFrog** · 25/07/2012, 12h09

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ...

**patrickbaras** · 25/07/2012, 15h10

Désolé pour le désespoir provoqué.
Je ne fait du jquery que depuis le début de la semaine.

**SpaceFrog** · 25/07/2012, 15h27

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

**patrickbaras** · 28/07/2012, 08h26

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

retourne le contenu

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

change le contenu

merci pour ton aide

**SpaceFrog** · 28/07/2012, 10h15

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

jQuery

Discussions similaires

Partager

Partager