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

检索XML文档中的HTML元素

1 个答案: