CODEWITHSUNDEEP
jquery
Jon Tackabury
Jon Tackabury

Reputation: 49247

Question about jQuery .append()

Can anyone help me understand why this line doesn't create an image with a link:

var img = new Image();
$('#id').html('<a href="http://google.com">').append(img).append('</a>');

I am setting the img attributes (src, alt... etc), I just took those lines out as they aren't relevant. Shouldn't this set the DIV's HTML to an HREF, then the image, then the closing A tag? This doesn't work for me, am I going about this the wrong way?

Upvotes: 1

Views: 109

Answers (4)

Šime Vidas
Šime Vidas

Reputation: 185933

This should do it:

$(img).appendTo('#id').wrap('<a href="http://google.com" />');

Live demo: http://jsfiddle.net/simevidas/A4HqE/1/

jQuery's html() will close your HTML elements automatically. See here: http://jsfiddle.net/simevidas/Ut2pQ/

Better solution:

$('<a href="http://google.com" />').append(img).appendTo('#id');

This solution is better because here the DOM is manipulated only once (when the ANCHOR is appended). In my original solution above, the DOM is manipulated twice (1. the IMG is appended, and 2. the ANCHOR is wrapped around the image).

Live demo: http://jsfiddle.net/simevidas/A4HqE/2/

Upvotes: 2

Patrick
Patrick

Reputation: 7712

Append is a tricky tag, some times it doesnt do what you expect.

In many cases its easer to use appendTo and actually BUILD the elements.

You have to append to something... its not like a string builder. Try:

$('<a>').attr({'id': 'aId'  'href': '[path for link]'}).appendTo('#divId');
$('<img>').attr('src', '[path to image]').appendto('#aId');

If you've already built your image using new Image() you can use ITS id as the selector to append to the anchor... which can be appended to the div.

Upvotes: 1

user342706
user342706

Reputation:

I would just do this:

$('#id').append($('<a>').attr('href', 'http://www.google.com').append(img));

Of course you have to set all the attributes for your image before anything will work correctly.

Upvotes: 0

Eli
Eli

Reputation: 17825

.append takes a whole tag as an input, not the opening tag:

$('#id').html('<a href="http://google.com"></a>').append(img);

Upvotes: 0

Related Questions