Add HTML element after text

I am looking for a way to add an HTML element using JavaScript. But the problem is that the new element might be in between some text. In all other cases I'm using the insertBefore() method.

I am using the following function to get the cursor position. My initial approach was to split the target innerHTML and add the necessary tags but the cursor position provided does not take into account the character conversions such as space to  . So if there are multiple continous spaces, the cursor position will not give the coreect position int he innerHTML.

function getCursorPos()
{
var cursorPos=-1;
if (window.getSelection)
{
    var selObj = window.getSelection();
    var selRange = selObj.getRangeAt(0);
    cursorPos =  findNode(selObj.anchorNode.parentNode.childNodes,
                        selObj.anchorNode) + selObj.anchorOffset;
/* FIXME the following works wrong in Opera when the document is longer than 32767 chars */
    }
    else if (document.selection)
    {
        var range = document.selection.createRange();
        var bookmark = range.getBookmark();
/* FIXME the following works wrong when the document is longer than 65535 chars */
        cursorPos = bookmark.charCodeAt(2) - 11; /* Undocumented function [3] */

    }

return cursorPos;
}

function findNode(list, node)
{
    for (var i = 0; i < list.length; i++)
    {
        if (list[i] == node) 
        {
            return i;
    }
    }
    return -1;
}

Is there any other method to do this? The new element may be in the middle of the HTML ie, it may not be always at the end.

Th开发者_如何学Pythonank You

You can do this:

var text = $("#container").html();//the target element has the id of container

Process text now, that is break up text the way you want or whatever you want to do with it and add html elements at the relevant position in this text using string addition.

Then do this ...

$("#container").html(text);

You can also take Keith's approach. It's important to realize what he said. Another way to look into it would be inserting a dom element (e.g., html tags) inside text may not be possible with insertAfter or insertBefore.

Here's part of the method I used. It works but I dont know if there are better ways.

function getCursorNode()
{
if (window.getSelection)
{
    var selObj = window.getSelection();
    return selObj.anchorNode;
}
}

function splitTextNode(pos) 
{

selNode=getCursorNode();
if(selNode.nodeName=="#text")
{
    var value=selNode.nodeValue;
    if(value.length == pos)
    {
        return ({"node":selNode,"txt":value }); 
    }
    else if(pos==0)
    {
        return ({"node":selNode,"txt":""}); 
    }
    else
    {                           
        var splittxt1=value.slice(0,pos)
        var tempsplit1=document.createTextNode(splittxt1);

        var splittxt2=value.slice(pos)
        var tempsplit2=document.createTextNode(splittxt2);

        myInsertAfterMany([tempsplit1,tempsplit2],selNode);
        child.parentNode.removeChild(selNode);

        return ({"node":tempsplit1,"first":false,"txt":splittxt1});
    }

}

}

But, it(getCursorNode) does not work in IE. Now, I append the required node after "node" after checking for "first"