JSFiddle - React, Tailwind, and code Playground

by isochronous

HTML

<div id="edit" contentEditable></div>
<div id="result"></div>

CSS

#edit{
    border: 1px dashed orange;
}
#result {
    margin-top: 2em;
    border: 1px solid black;
    padding: 3px;
}

JavaScript

var htmlString = "<p><br /></p>";
var position = htmlString.indexOf(">") + 1;
var newNnode = $(htmlString).get(0);
$("#edit").html(newNode);
$("result").text("position is " + position);
var selection = document.getSelection();
selection.collapse(newNode,0);
selection.extend(newNode, position);