title: moving caret outside of span created with surroundContents
body: <p>I am trying to move a selection if collapsed outside of any commonAncestorContainer parentNode (the span that is created when using wrap button) and so far i've had no luck. Here is the code:</p>
  <p>javascript</p>
  <pre><code>function wrapSelection(){
    var selection = window.getSelection();
    var span = document.createElement(&quot;span&quot;);
    span.style.fontWeight = &quot;bold&quot;;
    
    if(selection.rangeCount){
      var range = selection.getRangeAt(0).cloneRange();
      
      if(!range.collapsed){
      range.surroundContents(span);
      }else{
        var newRange = document.createRange();
        newRange.setStartAfter(range.commonAncestorContainer.parentNode);
        selection.addRange(newRange);
      }
    } 
  }
  </code></pre>
  <p>html</p>
  <pre><code>&lt;html&gt;
    &lt;head&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;input type=&quot;button&quot; value=&quot;wrap&quot; onclick=&quot;wrapSelection()&quot; style=&quot;margin-bottom:10px;&quot;/&gt;
      &lt;div id=&quot;my_textarea&quot; style=&quot;height:50rem; width:50rem; border:1px solid #000;&quot; contenteditable&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>codepen:
  <a href="https://codepen.io/justinhdevelopment/pen/PoNaXzj" rel="nofollow noreferrer">https://codepen.io/justinhdevelopment/pen/PoNaXzj</a></p>
  <p>This will bring the selection inside the parentNode container if the selection is collapsed.. could someone please help me in bringing the selection after the parentNode container? The end result would be after wrapping text and clicking the wrap button a second time, the text inputted would not be wrapped since the selection is outside/after the span. Thank you so much in advance!</p>