<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;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.