檢索XML文檔中的HTML元素

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>

我已經通過jQuery $.get()請求檢索了XML文件，現在我想將圖像嵌入到文檔中。 這是我嘗試過的代碼：

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

但是，當我運行此命令時，我得到的只是

[對象元素] [對象元素]

我還嘗試過將它們變成jQuery對象，例如： $($(pods[0]).find("img")[0]) ，該方法返回

[對象對象] [對象對象]

使用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"))
);