Creating nested elements using jQuery

Question

I am little confused here. I would like to have this structure.

<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>

I did that using,

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

As I wanted to escape the title (and description which I avoided here for an abstract view of the problem), I tried to do it the jQuery way. 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");

This is not working. I am doing something very very wrong. How to correct this?
JSFIDDLE: http://jsfiddle.net/e54VX/

By "the jQuery way" do you mean chaining? That's by no means exclusive to jQuery, & by no means "the way." — Grant Thomas
– Grant Thomas, Commented Jun 11, 2013 at 15:20
I don't know what your expected result is, but the jsFiddle seems to work fine for me, displaying what seems to be a list of thumbnails — Laurent S.
– Laurent S., Commented Jun 11, 2013 at 15:23
@GrantThomas: jquery way of creating elements using attr. @Bartitude: the expected HTML has been posted on the top of the question — codeandcloud
– codeandcloud, Commented Jun 11, 2013 at 17:52

James Montagne · Accepted Answer · 2013-06-11 16:54:00Z

2

From the docs for wrap:

This method returns the original set of elements for chaining purposes.

You will need to call .parent() after each wrap if you want to work with the outer element instead of the inner.

$('<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/

edited Jun 11, 2013 at 16:54

answered Jun 11, 2013 at 15:25

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

codeandcloud Over a year ago

thanks dude... sorry that i did not read the docs properly... still reeling from angularjs effect. thanks. may i ask, are there any simpler ways?

James Montagne Over a year ago

Just from a readability standpoint, I like to do it in reverse. Instead of starting from inside and wrapping, I start with the outer and append inward.

Collectives™ on Stack Overflow

Creating nested elements using jQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related