title: How can I insert new line/carriage returns into an element.textContent?
body: <p>As silly as it may sound, I still haven't found an appropriate answer.</p>
  <p>Let's say I want to dynamically create a new DOM element and fill up its textContent/innerText
  with a JS string literal.<br />
  The string is so long I would like to split it into three chunks:</p>
  <pre><code>var h1 = document.createElement(&quot;h1&quot;);
  
  h1.textContent = &quot;This is a very long string and I would like to insert a carriage return HERE...
  moreover, I would like to insert another carriage return HERE... 
  so this text will display in a new line&quot;;
  </code></pre>
  <p>The problem is, if i write</p>
  <pre><code>h1.textContent = &quot;...I would like to insert a carriage return here... \n&quot;;
  </code></pre>
  <p>it doesn't work, probably because the browser considers the '\n' to be pure text and displays it as such (the \r doesn't work either).</p>
  <p><em>On the other hand, I could change the h1.innerHTML instead of the textContent and write</em>:</p>
  <pre><code>h1.innerHTML = &quot;...I would like to insert a carriage return here...&lt;br /&gt;&quot;;
  </code></pre>
  <p><em>Here the &lt;br /&gt; would do the job, but doing so would replace not just the text content but all the HTML content of my h1, <strong>which is not quite what I want</strong></em>.</p>
  <p>Is there a simple way to solve my problem?<br /> I wouldn't resort to creating multiple block elements just to have the text on different lines. <br />
  Any idea would be greatly appreciated. <br />
  Thanks in advance.</p>