浏览器不会加载这些动态插入的图像

Question

我正在使用Wolfram | Alpha API，使用代理通过AJAX获取XML文件，这是非常有效的。然后我使用find()在该XML文件中查找一些pod元素。那些pod包含我要嵌入页面的图像。到现在为止还挺好。我从文件中获取了图像，并找出了如何将它们附加到容器中。这就是我遇到障碍的地方：图像没有出现。我检查时它们在那里，但它们没有加载。

这是我的JavaScript代码：

$.get(queryURL, function (data) {
    var wapods = $(data).find("pod");
    if (wapods.length !== 0) {
        $("#container").html('<div id="wabox"><a href="http://www.wolframalpha.com/input/?i=' + query + '" title="Wolfram|Alpha results for: ' + readQuery + '"><img id="walogo" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Wolfram_Alpha_logo.svg/200px-Wolfram_Alpha_logo.svg.png" width="150" height="18" alt="Wolfram|Alpha"/></a></div>');
        $("#wabox").append($(wapods[0]).find("img")[0])
        .append($(wapods[1]).find("img")[0]);
    }
});

创建元素时包含的图像显示为预期。另外两张图片没有。在Firefox中检查时，检查员说“无法加载图像”。这也发生在Chrome中。这不是因为插件;它也出现在一个新的配置文件中。

我最好的猜测是从XML文件中的元素到将其插入HTML DOM的过渡，但我不知道。

编辑：如果我右键单击并在检查器中选择“编辑为HTML”，更改一件事，然后退出编辑器，则会显示图像。仍然不知道为什么。

Answer 1

我认为你是正确的。元素不能只是从XML文档移动到HTML文档。

尝试获取元素的html代码（如图here所示），并附加：

function getHTML(el) {
  return $('<div>').append(el.clone()).html();
}

$("#wabox").append(getHTML($(wapods[0]).find("img").first()))
  .append(getHTML($(wapods[1]).find("img").first()));