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

Question

我正在使用 Wolfram|Alpha API，通过使用代理通过 AJAX 获取 XML 文件，它运行良好。然后我使用find() 在该XML 文件中查找一些pod 元素。那些pods 包含我想嵌入到我的页面中的图像。到目前为止，一切都很好。我从文件中取出图像并弄清楚如何将它们附加到容器中。那就是我遇到障碍的地方：图像没有出现。当我检查时它们就在那里，但它们没有加载。

这是我的 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()));