jQuery move the caret/cursor after the new appended element? -

so, have code appending tab when tab pressed, cursor stays behind tab after tab appended. how make when append new element cursor moves after/in right of tab. have code: jquery

$('.example').each(function(){     this.contenteditable = true; });  if(event.keycode==9){     event.preventdefault();     $('.example').append('\t'); } 

html

<div class="example"></div> 

this code not working har0lds proposal(which read in topic given not asked):

$('.example').each(function(){     this.contenteditable = true; });  function placecaret(field){                 var editable = field,                 selection, range;                  // populates selection , range variables                 var captureselection = function(e) {                 // don't capture selection outside editable region                 var isorcontainsanchor = false,                     isorcontainsfocus = false,                     sel = window.getselection(),                     parentanchor = sel.anchornode,                     parentfocus = sel.focusnode;                  while(parentanchor && parentanchor != document.documentelement) {                     if(parentanchor == editable) {                     isorcontainsanchor = true;                     }                     parentanchor = parentanchor.parentnode;                 }                  while(parentfocus && parentfocus != document.documentelement) {                     if(parentfocus == editable) {                     isorcontainsfocus = true;                     }                     parentfocus = parentfocus.parentnode;                 }                  if(!isorcontainsanchor || !isorcontainsfocus) {                     return;                 }                  selection = window.getselection();                  // range (standards)                 if(selection.getrangeat !== undefined) {                     range = selection.getrangeat(0);                  // range (safari 2)                 } else if(                     document.createrange &&                     selection.anchornode &&                     selection.anchoroffset &&                     selection.focusnode &&                     selection.focusoffset                 ) {                     range = document.createrange();                     range.setstart(selection.anchornode, selection.anchoroffset);                     range.setend(selection.focusnode, selection.focusoffset);                 } else {                     // failure here, not handled rest of script.                     // ie or older browser                 }                 };                  // recalculate selection while typing                 editable.onkeyup = captureselection;                  // recalculate selection after clicking/drag-selecting                 editable.onmousedown = function(e) {                 editable.classname = editable.classname + ' selecting';                 };                 document.onmouseup = function(e) {                 if(editable.classname.match(/\sselecting(\s|$)/)) {                     editable.classname = editable.classname.replace(/ selecting(\s|$)/, '');                     captureselection();                 }                 };                  editable.onblur = function(e) {                 var cursorstart = document.createelement('span'),                     collapsed = !!range.collapsed;                  cursorstart.id = 'cursorstart';                 cursorstart.appendchild(document.createtextnode('—'));                  // insert beginning cursor marker                 range.insertnode(cursorstart);                  // insert end cursor marker if text selected                 if(!collapsed) {                     var cursorend = document.createelement('span');                     cursorend.id = 'cursorend';                     range.collapse();                     range.insertnode(cursorend);                 }                 };                  // add callbacks afterfocus called after cursor replaced                 // if like, useful styling buttons , on                 var afterfocus = [];                 editable.onfocus = function(e) {                 // slight delay avoid initial selection                 // (at start or of contents depending on browser) being mistaken                 settimeout(function() {                     var cursorstart = document.getelementbyid('cursorstart'),                     cursorend = document.getelementbyid('cursorend');                      // don't if user creating new selection                     if(editable.classname.match(/\sselecting(\s|$)/)) {                     if(cursorstart) {                         cursorstart.parentnode.removechild(cursorstart);                     }                     if(cursorend) {                         cursorend.parentnode.removechild(cursorend);                     }                     } else if(cursorstart) {                     captureselection();                     var range = document.createrange();                      if(cursorend) {                         range.setstartafter(cursorstart);                         range.setendbefore(cursorend);                          // delete cursor markers                         cursorstart.parentnode.removechild(cursorstart);                         cursorend.parentnode.removechild(cursorend);                          // select range                         selection.removeallranges();                         selection.addrange(range);                     } else {                         range.selectnode(cursorstart);                          // select range                         selection.removeallranges();                         selection.addrange(range);                          // delete cursor marker                         document.execcommand('delete', false, null);                     }                     }                      // call callbacks here                     for(var = 0; < afterfocus.length; i++) {                     afterfocus[i]();                     }                     afterfocus = [];                      // register selection again                     captureselection();                 }, 10);                 }; }  if(event.keycode==9){     event.preventdefault();     $('.example').append('\t');     var element = document.getelementsbyclassname('example');     placecaret(element[0]); } 

the solution - set caret position right after inserted element in contenteditable div