JSFiddle - React, Tailwind, and code Playground

HTML

<div id="result" contenteditable="true"></div>
<button class="click">click to add text</butto>

CSS

#result {
    border: 1px solid black;
    width: 300px;
    height:200px;
}

JavaScript

var result = $('#result');


$('.click').click(function () {
    var preHtml = result.html();
    result.html(preHtml + "hello");
   
    result.focus();
    placeCaretAtEnd( document.getElementById("result") );
});

function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined"
            && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}