텍스트 뒤에 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에서 작동하지 않습니다. "first"를 확인한 후 "node"다음에 필요한 노드를 추가합니다.

Answer 2

당신이 할 수있는 감사 :

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

프로세스 text 지금, 즉 당신이 그것으로하고 관련에서 HTML 요소를 추가 할 무엇이든 당신이 원하는 방식으로 또는 text을 깰입니다 이 text 위치에 문자열 추가를 사용합니다.

그리고 이렇게 ...

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

은 또한 키스의 접근 방식을 취할 수 있습니다. 그가 말한 것을 깨닫는 것이 중요합니다. 텍스트를 보는 또 다른 방법은 insertAfter 또는 insertBefore을 사용하여 텍스트 내에 DOM 요소 (예 : HTML 태그)를 삽입 할 수없는 경우입니다.