jQuery Prepend an Image

Question

Hi Guys,

I am trying to add a prepend of an image and then define it's attributes. Little confused as how to do this - currently I have the following but it's not working. The HTML is

<div id="testID" class="test1">
        <div id="testID2" class="test2" ></div>
    </div>

And the JS is

var test123 = somecode{}
jQuery(test123).find('#testID2').prepend('<img />').attr({
   src: 'some src.gif',
   alt: '',
   height: '60'
});

I am hoping to achieve

<div id="testID" class="test1">
  <div id="testID2" class="test2" >
      <img src='some src.gif' alt='' height='60' />
  </div>
</div>

Any Ideas?

Answer 1

Should be:

jQuery("<img/>").prependTo("#testID2").attr({
   src: 'some src.gif',
   alt: '',
   height: '60'
});

because from your previous code, you are attaching the attributes to the container and not the img tag

Answer 2

Engwan's answer is a simple way to achieve what you want. This is just an alternate example where the attributes are set before the <img> tag is inserting into the DOM:

jQuery(test123).find('#testID2').prepend(
  $('<img />').attr({
   'src': 'some src.gif',
   'alt': '', 
   'height': '60'
  })
);