JSFiddle - React, Tailwind, and code Playground

HTML

<div contenteditable="true">this is some text<span id="span1"> TEXT IN A SPAN</span><br><span id="span2">SOME OTHER TEXT IN ANOTHER SPAN</span></div>
  <button id="button">click in text and press this button</button>
  <button id="button2">then click this button</button.

JavaScript

$( '#button' ).bind( 'click', function()
                    {
                      var sel = document.getSelection();
                      var range = sel.getRangeAt(0);
                      alert( "container is '" + range.startContainer.nodeName + "'" );
                    });

// now move the cursor AFTER the second span

$( '#button2' ).bind( 'click', function()
                     {
                       var span_node = $( '#span2' ).get(0);
                       
                       var sel = document.getSelection();
                       var range = document.createRange();
                       range.setStartAfter( span_node );
                       range.collapse( true );
                       
                       sel.removeAllRanges();
                       sel.addRange( range );
                       
                       var new_range = document.getSelection().getRangeAt(0);
                       
                       alert( "New container is '" + range.startContainer.nodeName + "' with offset '" + range.startOffset + "' childNodes.length '" + range.startContainer.childNodes.length );
                             });