Question

I’m allowing the user to select text contained within <div></div> and change it to bolded text. In other words from <div>this is some text</div> to <div>this is <b>some</b> text</div>. All is working except that when I change the div.innerHTML to this is <b>some</b> text, the <b>some</b> tags are shown to the user rather than being rendered as HTML and displaying some bolded. This is all happening client side with Javascript.

How do I force the browser to render the tags rather than reveal them to the user?

Per request, here is the code…

HTML…

<div id="blob">
One simple, but not very efficient implementation of a dictionary is a linked 
list. In this implementation all operations take linear time in the worst case 
(and even in the average case), assuming that insertions first check whether the 
item is in the current list. A more scalable implementation of a dictionary is a 
balanced search tree. In this lecture note we present two even more efficient data 
structures based on hashing.
</div>

Javascript…

tagText(document.getElementById("blob"),"<b>","</b>");

and…

//======================================================================
function tagText(el,tagstart,tagend)
    {
    var range = window.getSelection().getRangeAt(0);
    var rtxt = range.startContainer.textContent;
    var rlen = rtxt.length;
    var start = range.startOffset;
    var stop = range.endOffset;
    var result = rtxt.substring(0,start) + tagstart + rtxt.substring(start,stop) + tagend + rtxt.substring(stop,rlen);
//  el.innerHTML = result;
    range.startContainer.textContent = result;
    var txt = el.innerHTML;
    el.innerHTML = txt;
    }
//======================================================================

---

Looking at the div:innerHTML via firebug shows that the tags are escaped <b> rather than <b>.

Answer 1

That’s not what’s causing your problem, but..
Isn’t this wrong?

var txt = el.innerHTML;
el.innerHTML = txt;

Edit:

Try this:

<div id="blob">
One simple, but not very efficient implementation of a dictionary is a linked 
list. In this implementation all operations take linear time in the worst case 
(and even in the average case), assuming that insertions first check whether the 
item is in the current list. A more scalable implementation of a dictionary is a 
balanced search tree. In this lecture note we present two even more efficient data 
structures based on hashing.
</div>

<input type="button" value="sample" onclick='tagText();'>

and...

<script>
  function tagText() {
    var range = window.getSelection().getRangeAt(0);
    range.surroundContents(document.createElement("b"));
  }
</script>