jQuery AppendTo

Question

Я не уверен, почему этот jQuery выводит искаженный HTML:

<img src="http://farm6.static.flickr.com/5300/5459333519_0bfb0763b0_m.jpg">

Из этого кода:

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=59597329@N08&lang=en-us&format=json&jsoncallback=?", function(data){
    $.each(data.items, function(i,item){
        $("<img>").attr("src", item.media.m).appendTo("#mac");
    });
});

#mac - это div для хранения изображений

Кто-нибудь может понять это?

Answer 1

Этот HTML совершенно действителен. (Для XHTML вы должны использовать самозакрывающийся элемент.)

Но это не имеет значения , потому что к тому времени, когда jQuery модифицирует вещи, он взаимодействует с DOM (часть разметки почти закончена, за исключением того, что jQuery использует innerHTML, когда он может под крышкой). Таким образом, вы не увидите результат в виде разметки, за исключением инструментов (таких как Firebug), которые будут показывать вам структуры DOM в виде HTML-строк. Если вы используете документ XHTML, возможно, какой бы инструмент вы не использовали, он не следует соглашению XHTML для целей отображения, но это просто проблема отображения, а не реальная проблема со страницей.

Думайте об этом так: разметка похожа на строковый литерал в вашем исходном коде; DOM похож на фактическую строку во время выполнения. Отладчики покажут вам содержимое строки во время выполнения, обычно используя нотацию, похожую на строковые литералы (хотя это варьируется); аналогично, такие инструменты, как Firebug, инструменты разработчика Chrome и т. д., показывают структуры DOM с использованием нотации разметки. Но это просто отображение в инструменте.

Answer 2

Это не jQuerys .appendTo, которая вызывает "проблему". На фрагмент, как это:

var bar = document.createElement('img');
    bar.setAttribute('src', 'http://farm6.static.flickr.com/5300/5459333519_0bfb0763b0_m.jpg');
    document.body.insertBefore(bar, document.body.firstChild);

также создаст <img> узел без закрывающего </img>. В любом случае, это абсолютно нормально и действует во всех браузерах. Если какая-то проверка XHTML все-таки жалуется на это, вы можете игнорировать это изящно.