jQuery append or appendTo after an img

Question

I cannot get this simple append working. I'm trying to add two break tags AFTER the first Image.
This is a link

<script type="text/javascript">
$(document).ready(function(){

  $('.photosize').find('img:first').append('<br/><br/>');
});
</script>

score 12 · Accepted Answer · answered May 05 '11 at 13:56

12

append() inserts the elements as a child of the element it applies to. Use after() instead:

$('.photosize').find('img:first').after('<br/><br/>');

answered May 05 '11 at 13:56

Andy E

338,112
86
474
445

That's what I suspected but it doesn't seem to do anything unfortunately. – ToddN May 05 '11 at 13:58
@ToddN: it works for me - http://jsfiddle.net/Ns7AP/. Which browsers have you tested it in? – Andy E May 05 '11 at 14:01

score 0 · Answer 2 · answered May 05 '11 at 14:02

This already works, with caveats:

1) When you call $.append() it appends the string to the innerHTML of the element you are appending to. So for this instance it will add two line breaks to the innerHTML of the image element. Try using $.after() instead:

$('.photosize').find('img:first').after('<br/><br/>');

2) The :first selector doesn't work in many (if not all) versions of IE. You can fix this by selecting it using an ID or class instead of the pseudo class :first

score 0 · Answer 3 · answered May 05 '11 at 14:03

0

Do this (it's tested and works):

$('.photosize img').first().after('<br/><br/>');

Hope this helps. Cheers

answered May 05 '11 at 14:03

Edgar Villegas Alvarado

18,204
2
42
61

jQuery append or appendTo after an img

3 Answers3