JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test" contenteditable="true"><div id="div1">FIRST DIV</div><div id="div2">SECOND DIV</div></div>
  <button id="button">press this button</button>

JavaScript

// now move the cursor AFTER the first DIV

$( '#button' ).bind( 'click', function()
                     {
                       var dom_node = $( '#div1' ).get(0);
                       
                       var sel = document.getSelection();
                       var range = document.createRange();
                       range.setStartAfter( dom_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 + 
                             "' node at that offset is '" + range.startContainer.childNodes[ range.startOffset ].nodeName + 
                             "' and ID '" + range.startContainer.childNodes[ range.startOffset ].id );
                       
                       $( '#test' ).focus();
                       
                             });