jQuery - add html based on class name -

is there way add html based on class name , inject specific place. code belows shows trying do, obvioulsy hard coded, want dynamically using jquery.

<ul class="status clrfix"> <li class="green"><a href="">completed</a><span class="arrow"></span></li> <li class="green"><a href="">completed</a><span class="arrow"></span></li> <li class="blue"><a href="">in progress</a><span class="current-stage"><img src="images/current-stage.png" /></span><span class="arrow"></span></li> <li>not started <span class="arrow"></span></li> <li class="last">not started <span class="arrow"></span></li> 

so, want is; if class="blue" add inside li:

<span class="current-stage"><img src="images/current-stage.png" /></span> 

this attempted, it's not working:

$(document).ready(function() {    if($('ul.status li').hasclass('.blue')){     $("span.current-stage").empty().html('<img src="../images/current-stage.png" />'); } 

});

try changing if statement following:

if($('ul.status li').hasclass('blue')){ 

the hasclass() method accepts class name parameter, not selector. can leave out . on front of class.

also, if wish add html without removing there, use append() function.

$("span.current-stage").append('<span class="current-stage"><img src="../images/current-stage.png" /></span>');