JavaScript中在光标处插入添加文本标签节点的详细方法

正确的方法是正确运用selection对象和range对象，实现在光标当前位置插入文本或结点。但是这两个对象在ie和标准的dom方式的运用方法是不同的。

思路：首先获得用户的选区（光标当前位置可理解成起始和终止位置一样的选区）。然后，从selection对象转成range对象。目的是利用range对象的方法插内容进去。最后，插入动作结束后将光标移到插入内容的后面。

var sel = win.document.selection; //ie 
var sel = win.getselection(); //dom 
var range = sel.createrange(); // ie下 
var range = sel.getrangeat(0); // dom下 
if(range.startcontainer){ // dom下 
 sel.removeallranges(); // 删除selection中的所有range 
 range.deletecontents(); // 清除range中的内容 
 // 获得range中的第一个html结点 
 var container = range.startcontainer; 
 // 获得range起点的位移 
 var pos = range.startoffset; 
 // 建一个空range 
 range = document.createrange(); 
 // 插入内容 
 var cons = win.document.createtextnode(",:),"); 
 if(container.nodetype == 3){// 如是一个textnode 
 container.insertdata(pos, cons.nodevalue); 
 // 改变光标位置 
 range.setend(container, pos + cons.nodevalue.length); 
 range.setstart(container, pos + cons.nodevalue.length); 
 }else{// 如果是一个html node 
 var afternode = container.childnodes[pos]; 
 container.insertbefore(cons, afternode); 
 range.setend(cons, cons.nodevalue.length); 
 range.setstart(cons, cons.nodevalue.length); 
 } 
 sel.addrange(range); 
}else{// ie下 
 var cnode = range.parentelement(); 
 while(cnode.tagname.tolowercase() != “body”){ 
 cnodecnode = cnode.parentnode; 
 } 
 if(cnode.id && cnode.id==”rich_txt_editor”){ 
 range.pastehtml(",:),"); 
 } 
} 
win.focus(); 

innerhtml 和 pastehtml 区别

innerhtml 是一个属性，可以取得或者设定该元素内的 html 内容，可以是任意能包含 html 子节点的元素都使用它

pastehtml()是一个方法，在指定的文字区域内替换该区域内的文本或者html，该方法必须应用于一个 createtextrange() 或者 document.selection.createrange() 创建的区域上

var orange = document.selection.createrange(); 
 if(orange.text!=''){ 
 var ohtml = '<a href="#" rel="external nofollow" target=_blank>orange.text</a>'; 
 orange.pastehtml(ohtml); 
 } 

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！