DIV paste after inserting text or other elements, move cursor to latest position

This article is mainly editable div cursor position processing

1: First set an editable Div, note: set contenteditable= "true" to edit div

<div id= "talkcontent" style= "Resize:none;height:150px;overflow:auto" contenteditable= "true" ></div>

2: Move the cursor JS method

//After the chat box has inserted text or other elements, move the cursor to the latest positionfunctionInserthtmlatcaret (childelement) {varsel, Range; if(window.getselection) {//IE9 and Non-ieSEL =window.getselection (); if(Sel.getrangeat &&sel.rangecount) {range= Sel.getrangeat (0);            Range.deletecontents (); varel = document.createelement ("div");            El.appendchild (childelement); varFrag =document.createdocumentfragment (), node, lastnode;  while(node =el.firstchild)) {Lastnode=frag.appendchild (node);            } range.insertnode (Frag); if(lastnode) {range=Range.clonerange ();                Range.setstartafter (Lastnode); Range.collapse (true);                Sel.removeallranges ();            Sel.addrange (range); }        }    }    Else if(document.selection && Document.selection.type! = "Control") {        //IE < 9        //Document.selection.createRange (). pastehtml (HTML);    }}

3: Append text from the cursor's current position, after success, the cursor is behind the appended text

    Inserthtmlatcaret (document.createTextNode (' Here is the text to append '));

4: Append element from cursor now position, after success, cursor behind appended element

  var new_img = document.createelement (' img ');    New_img.setattribute (' src ', ' This is the image address ')    ; = "200px";     = "120px";    Inserthtmlatcaret (new_img);

DIV paste after inserting text or other elements, move cursor to latest position