jquery - 使用 jQuery 创建嵌套元素

Question

我在这里有点困惑。我想要这个结构。

<ul class="cont">
    <li>
        <a href="http://www.youtube.com/watch?v=my_video_id" title="My title">
            <img alt="my alt" src="http://img.youtube.com/vi/my_video_id/default.jpg" <="" a="">
        </a>
    </li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

我是这样做的，

list_data += '<li><a href="' + url + '" title="' 
        + feedTitle + '"><img alt="' + feedTitle + '" src="' 
        + thumb + '"</a></li>';

因为我想逃避标题（以及我在此避免的描述，以便对问题进行抽象视图），所以我尝试以 jQuery 的方式来做。IE，

    $('<img/>').attr({
        alt: feedTitle,
        src: thumb
    }).wrap('<a/>').attr({
        id: 'id_' + videoID,
        href: url,
        title: description,
        rel: 'external'
    }).wrap('<li/>').attr({
        class: 'video'
    }).appendTo(".cont");

这是行不通的。我在做一些非常非常错误的事情。如何纠正这个？
JSFIDDLE：http: //jsfiddle.net/e54VX/

Answer 1

从文档中wrap：

此方法返回用于链接目的的原始元素集。

如果您想使用外部元素而不是内部元素，则需要.parent()在每个之后调用。wrap

$('<img/>').attr({
    alt: feedTitle,
    src: thumb
}).wrap('<a/>').parent().attr({
    id: 'id_' + videoID,
    href: url,
    title: description,
    rel: 'external'
}).wrap('<li/>').parent().attr({
    class: 'video'
}).appendTo(".cont");

http://jsfiddle.net/e54VX/7/