jQuery issue with toggling HTML codes -

i trying check occurance of html decimal code , switch accordingly, per geometric shapes on page.

the code example shown below, , fiddle link is:

http://jsfiddle.net/w1sk6gsp/6/

$(document).ready(function() {  $( '.container' ).prepend( '<span class="html">&#9650;</span>' ); $( '.container' ).prepend( '<span class="text">initial</span>' );  $( '.html' ).on( 'click', function() {       $( ).html( $( ).html() == '&#9650;' ? '&#9660;' : '&#9650;' );  } );  $( '.text' ).on( 'click', function() {       $( ).html( $( ).html() == 'initial' ? 'switched' : 'initial' );  } );  }); 

i have included 1 called text , 1 called html can see work text not html code, please explain how work , if not, @ least reasons why not working.

to provide accepted answer doesn't show unanswered solution provided @regent below:

$(document).ready(function() {     $('.container').prepend('<span class="html">&#9650;</span>');    $('.container').prepend('<span class="text">initial</span>');     $('.html').on('click', function() {         $(this).html($(this).html() == '\u25b2' ? '&#9660;' : '&#9650;');    });     $('.text').on('click', function() {        $(this).html($(this).html() == 'initial' ? 'switched' : 'initial' );    });   });