javascript - strange behavior of html tags inside contenteditable div -

in project, trying add html tag letter (< , >) dynamically contenteditable div. whenever user pressing alphanumeric character, appending empty span element used calculating position of caret in contenteditable div.

the problem when type words following:

when < 

and press alphanumeric character b (which calls function append span element), contenteditable div showing when instead of when <b.

when inspected element found contenteditable div has following content:

when <b<span class="spanpos"></b<span>                               ^  strange span holding '</b' instead of being empty 

here example jsfiddle.

i not sure how happening. please tell me should evade issue.

ps: here trying add < , >, not html elements <b></b>.

as said, you're trying add symbol can interpreted html. need escape or use different way express iso entity:

$('#btncontent').click(function(){     $('#content').html("when &lt;b" + "<span class='spanpos'></span>"); }); 

http://jsfiddle.net/dekku/jxevw/1/