检索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"))
);