JSFiddle - React, Tailwind, and code Playground

HTML

<div contenteditable style="border: 1px inset"></div>
<button onclick="alert(document.getElementsByTagName('div')[0].innerHTML);">show innerHTML (1)</button>
<button onclick="document.getElementsByTagName('div')[0].hasAttribute('contenteditable') ? document.getElementsByTagName('div')[0].removeAttribute('contenteditable') : document.getElementsByTagName('div')[0].setAttribute('contenteditable', 'true');">toggle contenedtiable (1)</button>
<div contenteditable style="border: 1px inset"><br /></div>
<button onclick="alert(document.getElementsByTagName('div')[1].innerHTML);">show innerHTML (2)</button>
<button onclick="document.getElementsByTagName('div')[1].hasAttribute('contenteditable') ? document.getElementsByTagName('div')[1].removeAttribute('contenteditable') : document.getElementsByTagName('div')[1].setAttribute('contenteditable', 'true');">toggle contenedtiable (2)</button>
<div style="border: 1px inset"></div>
<button onclick="alert(document.getElementsByTagName('div')[2].innerHTML);">show innerHTML (3)</button>
<button onclick="document.getElementsByTagName('div')[2].setAttribute('contenteditable', 'true');">make it contenedtiable (3)</button>
<button onclick="document.getElementsByTagName('div')[2].appendChild(document.createElement('p'));">append p element (3)</button>