Браузеры не загружают эти динамически вставленные изображения

Question

Я использую API Wolfram Alpha с помощью прокси для получения XML-файла через AJAX, который отлично работает. Затем я использую find() для поиска некоторых элементов pod в этом XML-файле. Эти pod s содержат изображения, которые я хочу встроить в свою страницу. Все идет нормально. Я получил изображения из файла и понял, как добавить их в контейнер. Вот где я попал в ловушку: изображения не появляются. Они там, когда я проверяю, но они не загружаются.

Вот мой код 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.

Попробуйте получить код для элементов (как показано 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()));