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使用{{1}当它可以掩盖下来的时候）。因此，您不会将结果看作标记，除非在工具（如Firebug）中将DOM结构显示为HTML字符串。如果您正在使用XHTML文档，也许您正在使用的任何工具都不遵循XHTML约定用于显示目的，但这只是一个显示问题，而不是页面的实际问题。

以这种方式思考：Markup就像源代码中的字符串文字; 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验证确实抱怨了这一点，您可以优雅地忽略它。

jQuery AppendTo

2 个答案: