Question

我正在寻找一种使用JavaScript添加HTML元素的方法。但问题是新元素可能介于某些文本之间。在所有其他情况下，我正在使用insertBefore（）方法。

我使用以下函数来获取光标位置。我最初的方法是拆分目标innerHTML并添加必要的标签，但提供的光标位置不考虑字符转换，例如  的空格。因此，如果存在多个连续空格，则光标位置将不会在innerHTML中给出coreect位置。

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;
}

还有其他方法吗？新元素可能位于HTML的中间，即它可能并不总是在最后。

谢谢

Answer 1

你可以这样做：

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

现在处理text，即以你想要的方式分解text或者你想做什么，并使用字符串添加在此text的相关位置添加html元素

然后这样做......

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

你也可以采取基思的方法。重要的是要意识到他说的话。查看它的另一种方法是使用insertAfter或insertBefore无法在文本中插入dom元素（例如，html标记）。

Answer 2

这是我使用的方法的一部分。它有效，但我不知道是否有更好的方法。

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});
    }

}

}

但是，它（getCursorNode）在IE中不起作用。现在，在检查“first”

之后，我在“node”之后追加所需的节点

在文本后添加HTML元素

2 个答案: