I have been facing a problem in inserting content at current cursor position in a content editable div.Step 1 : i insert a span element containing some text .Now i try to insert another element adjacent to the span element.The newly inserted element is getting neseted inside the span element.I want it to get inserted after the span element.
Here is the function that i am using to insert content..


function pasteHtmlAtCaret(html) {
var sel ;
if (window.getSelection) {
// IE9 and non-IE
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
if (range == null)
{

range = sel.getRangeAt(0);
}
range.deleteContents();

// Range.createContextualFragment() would be useful here but is
// non-standard and not supported in all browsers (IE9, for one)
var el = document.createElement("div");
el.innerHTML = html;
//el.innerText = html;
var frag = document.createDocumentFragment(), node, lastNode;
while ( (node = el.firstChild) )
{
lastNode = frag.appendChild(node);
}
range.insertNode(frag);

// Preserve the selection
if (lastNode) {
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);

}
}
} else if (document.selection && document.selection.type != "Control") {
// IE < 9
if (range == null)
{

document.selection.createRange().pasteHTML(html);
}
else
{
range.pasteHTML(html);

}


}
}