在文本后添加HTML元素

Question

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

我正在使用以下函数来获取光标位置。 我最初的做法是分割目标innerHTML并添加必要的标签，但提供的光标位置不考虑字符转换，如空间到 。因此，如果存在多个连续空格，则光标位置将不会在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; 
} 

有没有其他方法可以做到这一点？ 新的元素可能在HTML的中间，即它可能并不总是在最后。

谢谢

Answer 1

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

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浏览器。 现在，在检查“第一个”之后，我在“节点”之后附加了所需的节点。

Answer 2

你可以这样做：

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

过程text现在，那就是分手text任何你想用它做，并在相关的HTML元素添加你想要的方式或在此text位置使用字符串添加。

然后做此...

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

你也可以采取Keith的做法。认识他所说的很重要。另一种研究它的方法是在文本内插入一个dom元素（例如，html标签），这可能不适用于insertAfter或insertBefore。