Detailed introduction to the method of inserting and adding text label nodes at the cursor in JavaScript

This article mainly introduces the detailed method of inserting and adding text label nodes at the cursor in JavaScript. Has very good reference value. Let's take a look at it with the editor

The correct method is to correctly use the Selection object and the Range object to insert text or nodes at the current position of the cursor. However, the application methods of these two objects in IE and standard DOM methods are different.

Idea: First obtain the user's selection (the current position of the cursor can be understood as a selection with the same starting and ending positions). Then, convert the Selection object into a Range object. The purpose is to use the methods of the Range object to insert content. Finally, after the insertion action is completed, move the cursor behind the inserted content.

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

The difference between innerHTML and pasteHTML

innerHTML is an attribute,can Get or set the HTML content within the element. It can be used for any element that can contain HTML child nodes.

pasteHTML() is a method, Replace the text or HTML in the specified text area. This method must be applied to a area created by createTextRange() or document.selection.createRange()

var oRange = document.selection.createRange(); 
 if(oRange.text!=''){ 
 var oHtml = &#39;<a href="#" rel="external nofollow" target=_blank>oRange.text</a>&#39;; 
 oRange.pasteHTML(oHtml); 
 }

The above is the detailed content of Detailed introduction to the method of inserting and adding text label nodes at the cursor in JavaScript. For more information, please follow other related articles on the PHP Chinese website!