<div contenteditable>
  <span style="opacity: 0">And</span> I have a tender spot in my
  <span style="display: block; text-indent: -999px">heart</span> for
  <ul>
    <li>cripples</li>
    <li>and bastards</li>
    <li style="text-transform: capitalize">and broken things.</li>
  </ul>
  
</div>
<div>
  markup<textarea id="markup" style="display: inline-block"></textarea>
</div>
<div>
  innerText<textarea id="innerText" style="display: inline-block"></textarea>
</div>

div, textarea {
  display: inline-block;
  vertical-align: top;
  width: 260px;
  height: 200px;
  margin-right: 10px;
}
li::after { content: '\a0\b0' }
li { margin-bottom: 20px; }

document.querySelector('#markup').value = document.querySelector('div').innerHTML;

document.querySelector('#innerText').value = document.querySelector('div').innerText;