Получить HTML-элемент внутри документа XML

Question

У меня есть документ XML со структурой, как это:

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

Я извлеченный файл XML с помощью $.get() запроса JQuery, и теперь я хочу, чтобы вставлять изображения в мой документ. Это код, который я пробовал:

$.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>'); 
    } 
}); 

Однако, все это я получаю, когда я бегу это

[объект Element] [объект Element]

Я также попытался поворота их в объекты jQuery, такие как: $($(pods[0]).find("img")[0]), который возвращает

[object Object] [object Object]

С помощью функции JQuery $.parseHTML() дает

Null Null

Я не понимаю, почему он делает это, потому что, когда я вхожу элементы в консоли они отображаются как действительные элементы HTML.

Answer 1

Проблема заключается в том, что вы делаете конкатенации:

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

... но элементы не являются строками, они элементы. Когда вы конвертируете элемент в строку, вы получаете ... "[object Element]".

Решение: не выполнять конкатенацию строк. Вот один из способов:

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

Технически, вы можете сделать это без переменной:

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