Question

I am trying to make my codes less ugly. There are many if statement and repeating codes here. The main difference is insertBefore and prependTo alone with few css property changed. Are there any suggestions to simplify my codes here?? Thanks a million.

if($element.closest('div').hasClass('links')){
    $(document.createElement('img'))
        .attr({src:'inc/images/bubble_anim.gif',  'class': 'helpImg'})
        .insertBefore($element)
        .css({'position':'absolute',
            'z-index':99,
            'top': topPos+30,
            'left': leftPos
         })

     return true;
 }

 if($element.attr('id')=='option'){
     $(document.createElement('img'))
         .attr({src:'inc/images/bubble_anim.gif',  'class': 'helpImg'})
         .prependTo($element)
         .css({ 'z-index':99  })

     return true;
 }           

 //if the element is a td element, using propendTo method.
 if($element.is('td')){
     $(document.createElement('img'))
     .attr({src:'inc/images/bubble_anim.gif',  'class': 'helpImg'})
     .prependTo($element)
     .css({'position':'absolute',
         'z-index':99,
         'top': topPos,
         'left': leftPos
     })

     return true;
}

//regular elements...
$(document.createElement('img'))
    .attr({src:'inc/images/bubble_anim.gif',  'class': 'helpImg'})
    .insertBefore($element)
    .css({'position':'absolute',
        'z-index':99,
        'top': topPos,
        'left': leftPos
    })

Answer 1

How about:

var img = $("<img src='inc/images/bubble_anim.gif' class='helpImg'>");

var css = {'position':'absolute',
           'z-index':99,
           'top': topPos,
           'left': leftPos
};

if($element.attr('id')=='asmnt_option_label_q_count'){
    $img.prependTo($element).css({ 'z-index':99})
}
else if($element.is('td')){
    $img.prependTo($element).css(css);
}
else{      
    css.top += ($element.closest('div').hasClass('sub_links')) ? 30 : 0;         
    img.insertBefore($element).css(css)​;
}
​