javascript - 检索 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>');
    }
});

但是，当我运行这个时我得到的只是

[object Element][object 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"))
);