title: Inserting an element into a range clears the selection in Chrome
body: <p>I'm trying to insert a marker at the beginning of a selection (that I use to position an element atop the selection).</p>
  
  <p>I'm running into a weird case in Chrome where the selection is cleared when the <code>range.insertNode</code> line is executed: </p>
  
  <pre><code>$(document).on('mouseup', function (e) {
    var range = window.getSelection().getRangeAt(0).cloneRange();
    range.collapse(true);
    var markerElement = document.createElement("span");
    markerElement.appendChild(document.createTextNode("\ufeff"));
    // this will sometimes make the selection disappear in Chrome
    range.insertNode(markerElement);
    // make sure the marker is removed
    setTimeout(function(){
     markerElement.parentNode.removeChild(markerElement);
    }, 250);
  });
  </code></pre>
  
  <p>Here is a <code>jsbin</code> example you can use to try it out: <a href="http://jsbin.com/agojib/1/edit" rel="nofollow noreferrer">http://jsbin.com/agojib/1/edit</a></p>
  
  <p>If you select a <strong>single</strong> letter, it will clear the selection.
  Any other selection will be fine.</p>
  
  <p><strong>Note:</strong> I'm using a modification of the code provided in <a href="https://stackoverflow.com/questions/1589721/how-can-i-position-an-element-next-to-user-text-selection">How can I position an element next to user text selection?</a></p>