JSFiddle - React, Tailwind, and code Playground

HTML

<button id="addListBtn">Insert List</button><br /><br /> <!--FOR TESTING ONLY!-->

<div class="input" contenteditable="true">
    Some text that's already in the div.
</div>

CSS

.input {
    border: 1px solid #ccc;
}

JavaScript

$(window).on('load',function(){
    $('#addListBtn').click(function(){
        $('div.input').append('<ul><li><div id="insertedList">&nbsp;</div></li></ul>');
        if (setCaret('insertedList')) {$('#insertedList').remove();} //don't remove until setCaret() has fully executed
    });
    
    function setCaret(id) {
        var range = document.createRange();
        range.setStart(document.getElementById(id).childNodes[0],0);
        range.collapse(true);
        var selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
        return true;
    }
});