在文本後添加HTML元素

我正在尋找一種使用JavaScript添加HTML元素的方法。但問題是新的元素可能在一些文本之間。在所有其他情況下，我使用insertBefore（）方法。在文本後添加HTML元素

我正在使用以下函數來獲取光標位置。我最初的做法是分割目標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的中間，即它可能並不總是在最後。

謝謝

來源

2011-03-18 Diff.Thinkr

文本是DOM中的葉節點。所以最好的方法是刮出文本，獲得父元素。刪除子項（文本）添加新元素，在創建新文本節點後拆分文本（現在是字符串）和appendChild。 – Keith 2011-03-18 06:29:49

對不起，但我沒有得到你。（「所以最好的方法是刮出文本，獲取父元素」）。你是否建議使用光標位置來獲取文本節點，將文本拆分爲2，追加text1，newhtml，text2（按照該順序）？但是如果在文本之前還有其他html元素作爲childern呢？ – 2011-03-18 07:39:58

對於之前的評論我很抱歉，但是這個竅門。謝謝！ – 2011-03-18 12:06:26

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

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瀏覽器。現在，在檢查「第一個」之後，我在「節點」之後附加了所需的節點。

來源

2011-03-22 10:27:15

你可以這樣做：

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

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

然後做此...

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

你也可以採取Keith的做法。認識他所說的很重要。另一種研究它的方法是在文本內插入一個dom元素（例如，html標籤），這可能不適用於insertAfter或insertBefore。

來源

2011-03-18 07:35:41 rayhan

據我所知，這會給我innerHTML的JavaScript等價物。那麼，我將如何找到該HTML字符串的遊標位置？ – 2011-03-18 10:31:39

@ Diff.Thinkr：您是否在嘗試查找所選文本左上角的座標？您的計算對於等寬字體 - 固定寬度的字體可能是正確的。但是，在大多數情況下，對於寬度各不相同的字體而言，這是不正確的。我認爲你仍然可以爲你的目的使用這個粗略的近似值。如果這不是問題，那麼您能否詳細闡述一下你試圖實現的目標？ – rayhan 2011-03-18 11:54:06

在文本後添加HTML元素

回答

相關問題