title: How do you move the cursor to the next element in a contenteditable div in Chrome/Safari?
body: <p>I have logic to insert a  tag in a contenteditable div. I want to set the cursor to the start of the following element after the insertion. The code I have to do this is:</p>
  
  <pre><code>function insertNodeAtCaret(node) {
  if(typeof window.getSelection !== 'undefined')
  {
      var sel = window.getSelection();
      if(sel.rangeCount)
      {
          var rng = sel.getRangeAt(0);
          rng.collapse(false);
          rng.insertNode(node);
  
          // The following doesn't work in Chrome or Safari
          node = node.nextSibling;
          rng.setEndAfter(node);
          rng.setStartAfter(node);
          rng.collapse(true);
          sel.removeAllRanges();
          sel.addRange(rng);
      }
  }
  else if (typeof document.selection !== 'undefined' &amp;&amp; document.selection.type !== 'Control')
  {
      document.selection.createRange().pasteHTML(node.outerHTML);
  }
  }
  </code></pre>
  
  <p>However though this works perfectly in IE, Opera and Firefox it doesn't work in Chrome and Safari. In Chrome/Safari the cursor is placed at the end of the text within the span, rather than after the span. ie</p>
  
  <pre><code>&lt;span&gt;text CURSOR HERE&lt;/span&gt;
  </code></pre>
  
  <p>instead of what I am wanting, which is:</p>
  
  <pre><code>&lt;span&gt;text&lt;/span&gt;CURSOR HERE
  </code></pre>
  
  <p>Thanks.</p>