[Aetae]

И как, позвольте поинтересоваться, вы будете вставлять новый элемент в произвольное место страницы, если insertBefore хочет ссылку на нод, а пятый текстовый символ нодом не является?

Элементарно, ватсон, если использовать чистый DOM:

<div style="cursor:pointer" onclick = "a(event,this)">
    Такие дела, братюня.
</div>
<script type="text/javascript">
function a(e,t){
	var textnode = e.rangeParent, node = textnode.parentNode, fragment = document.createDocumentFragment();
	
	fragment.appendChild( document.createTextNode( textnode.data.slice(0,e.rangeOffset) ) )
	fragment.appendChild( document.createElement('b') ).appendChild( document.createTextNode( textnode.data.slice(e.rangeOffset,e.rangeOffset+1) ) )
	fragment.appendChild( document.createTextNode( textnode.data.slice(e.rangeOffset+1) ) )

	node.replaceChild(fragment, textnode)
	
	t.nextSibling.data = t.innerHTML;
}
</script>

но на самом деле это всё делается с помощью Selection и Range:

<div contenteditable="true" onmouseup = "a(event,this)">
    Такие дела, братюня.
</div>
<script type="text/javascript">
function a(e,t){
	var range = window.getSelection().getRangeAt(0);
	range.surroundContents(document.createElement('b'));
	
	t.nextSibling.data = t.innerHTML;
}
</script>