Strange Behavior Of Html Tags Inside Contenteditable Div

In my project, I am trying to add HTML tag letter (< and >) dynamically to a contenteditable div. Whenever user is pressing alphanumeric character, I am appending an empty sp

Solution 1:

As you said, you're trying to add a symbol which can be interpreted as HTML. You need to escape it or use a different way to express it as an ISO entity:

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

http://jsfiddle.net/Dekku/jXeVW/1/

Solution 2:

The problem was actually that I was appending a span element to the text whenever the user types something in to the contenteditable div to grab the position of the caret. Something like this

HelloIamhe|re
             ^ Caretposition

Then I was adding a span element in between of that text using .html() something like this

Hello I am he<span></span>re

Now whenever I add any letter which represents Html like < or >, then it was merging some of the text inside the span (as I shown above in my post).

So, I solved it by removing it just after when I get the position through span element. I followed the below steps to solve this issue for each letter pressed by the user.

//Store the .text() in a variable.//Replace Html letters inside the contenteditable div with alphabets which has same width. (for exact positioning).//add span to the modified text through .html()//get the offset position of the span //Do something with that offset position//Remove span//Replace the .text() inside the contenteditable div with the text which was stored in a variable.

I did these many things to solve this issue because I was using .text() everywhere else in my project code. If I change it to .html() then I must have rewritten the complete code and might also can't complete the project.

Clearly, I couldn't have done the things which were mentioned in the other answered posts. I hope this will help someone.