Récupérer un élément HTML à l'intérieur d'un document XML

Question

J'ai un document XML avec une structure comme celle-ci:

<pod id="1"> 
    Lorem ipsum.... 
    <subpod> 
     <img src="example.gif"> 
    </subpod> 
</pod> 
<pod id="2"> 
    Lorem ipsum.... 
    <subpod> 
     <img src="example2.gif"> 
    </subpod> 
</pod> 

je récupérer le fichier XML par le biais d'une demande jQuery $.get(), et maintenant je veux intégrer les images dans mon document. Voici le code que j'ai essayé:

$.get(queryURL, function (data) { 
    var pods = $(data).find("pod"); 
    if (pods.length !== 0) { 
     $("#container").html('<div id="podcontainer">' + $(pods[0]).find("img")[0] + $(pods[1]).find("img")[0] + '</div>'); 
    } 
}); 

Cependant, tout ce que je reçois quand je lance c'est

[objet Element] [objet Element]

J'ai aussi essayé tourner les dans des objets jQuery comme suit: $($(pods[0]).find("img")[0]), qui renvoie

[objet objet] [objet objet]

Utilisation de la fonction jQuery $.parseHTML() donne

null null

Je ne comprends pas pourquoi il fait cela, parce que quand je me connecte les éléments de la console, ils apparaissent comme éléments HTML valides.

Answer 1

Le problème est que vous faites la concaténation de chaîne:

$("#container").html('<div id="podcontainer">' + $(pods[0]).find("img")[0] + $(pods[1]).find("img")[0] + '</div>'); 

... mais les éléments ne sont pas des chaînes, ils sont éléments. Lorsque vous convertissez un élément à une chaîne, vous obtenez ... "[object Element]".

La solution est: Ne pas faire concaténation de chaînes. Voici une façon:

var div = $('<div id="podcontainer"></div>'); 
div.append($(pods[0]).find("img")); 
div.append($(pods[1]).find("img")); 
$("#container").html(div); 

Techniquement, vous pouvez le faire sans la variable:

$("#container").html(
    $('<div id="podcontainer"></div>') 
     .append($(pods[0]).find("img")) 
     .append($(pods[1]).find("img")) 
);