innerText vs. textContent vs. TextNode

Things to test: 1. Undo 2. Caret positionn 3. Newlines

HTML

<div id="f" contenteditable>asdf</div>

CSS

pre { 
    border: 1px solid #222;
    width: 100%;
    height: 130px;
    
    white-space: pre; 
    
    position: relative;
}

/* Let's identify our editors */
pre:after {
    position: absolute;
    top: 0;
    right: 0;
    
    content: attr(id);
}

JavaScript

var e = document.getElementById('f')
console.log(e.textContent)