title: Add linebreak to textContent or innerText only - in Chrome
body: <p>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. </p>
  
  <p>Any Ideas?</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>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.</p>
  
  <p><strong>Here's an updated demo:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function checkit() {
    var c1 = document.getElementById('c1')
    alert("TEXTCONTENT:\n" + c1.textContent + "\n\nINNERTEXT:\n" + c1.innerText + "\n\nINNERHTML:\n" + c1.innerHTML)
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {padding: 20px; border-bottom: 1px solid #CCC;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;&lt;a href="#" onclick="checkit()"&gt;check it&lt;/a&gt;&lt;/div&gt;
  
  &lt;div contentEditable="true" id="c1"&gt;click inside this &lt;b&gt;div&lt;/b&gt;,
  press return and then press &lt;b&gt;check it&lt;/b&gt; above&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>