Add linebreak to textContent or innerText only - in Chrome

Question

This is a complicated one! Im working with contentEditable in Chrome and I'm experiencing a head melting problem. When I press the return key, Chrome inserts a new div into the innerHTML. This is fine and dandy. The problem is that the line break is nowhere to be found in the div's textContent. I really need to figure out a way to add the line break to the textContent in the same place as the div break in the innerHTML.

Any Ideas?

UPDATE:

I can use innerText but then line breaks that are there when the page loads are ignored. I need consistency across one of these methods. In other words, I need textContent to show newly inputted line breaks or innerText to show line breaks that existed on page load.

Here's an updated demo:

Answer 1

This is because textContent is not aware of style. As a result, e.g., it displays hidden content.

Change c1.textContent to c1.innerText and it will display the line break.