appending html after the last image using jquery

Question

How do i append the following html after the last img:

//create the icon
$('div.lookup-image-wrapper > div img').append('<div class="icon"></div>');

Here is my markup:

<div class="lookup-image-wrapper" style="text-align: center">

        <div class="divProductPic" id="divProductPic26039">
            <img alt="200 D" border="0" id="ProductPic26039" name=
            "ProductPic26039" onclick="popuplarge_26039()" src=
            "images/Product/medium/26039.jpg" style=
            "cursor:hand;cursor:pointer;" title=
            "Click here to view larger image">
        </div>


    <img alt="Show Picture 1" border="0" class="image-nav" onclick="_(1);" src="images/PRODUCT/icon/26039_1_.jpg"
        style="cursor:hand;cursor:pointer;">
    <img alt="Show Picture 2" border="0" class="image-nav" onclick="_(2);" src="images/PRODUCT/icon/26039_2_.jpg"
         style="cursor:hand;cursor:pointer;"><img alt="Show Picture 3" border="0" class="image-nav" onclick="setcolorpicidx_26039(3);" src=
        "images/PRODUCT/icon/26039_3_.jpg" style="cursor:hand;cursor:pointer;">

            <!--[#### THE DIV ICON NEEDS TO GO HERE #####]-->

     <div id="prodEmbiggen">
        <a href="javascript:void(0);" onclick=""><img align="absmiddle" alt="" border="0" src="showlarger.gif" title=
          "Click for larger image"></a>
     </div>
</div>

use the :last or .last() selector on image tags then .append() api.jquery.com/last — Carlo Moretti
– Carlo Moretti, Commented Aug 9, 2012 at 9:14

Rory McCrossan · Accepted Answer · 2012-08-09 09:20:00Z

3

Try this:

$('div.lookup-image-wrapper > img:last').after('<div class="icon"></div>');

edited Aug 9, 2012 at 9:20

answered Aug 9, 2012 at 9:14

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

4 Comments

SOLDIER-OF-FORTUNE Over a year ago

Thanks but this seems to add it to the last div, inside the A because that would be the last image: jsfiddle.net/x6Yrr/1

Rory McCrossan Over a year ago

Which image are you trying to target? The one inside .divProductPic?

SOLDIER-OF-FORTUNE Over a year ago

yep... i need to add the HTML before the <div id="prodEmbiggen">

SOLDIER-OF-FORTUNE Over a year ago

I fixed it, i think you needed $('div.lookup-image-wrapper > div > img:last').after('<div class="icon"></div>');

Dan · Accepted Answer · 2012-08-09 09:15:31Z

2

To append content after the last image, use the last selector (:last)

$('div.lookup-image-wrapper > div img:last').append("your content");

If you have a lot of content to append, you can minify the HTML here http://www.willpeavy.com/minifier/

answered Aug 9, 2012 at 9:15

Dan

52610 silver badges28 bronze badges

Collectives™ on Stack Overflow

appending html after the last image using jquery

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related