Javascript DOM How to - Insert new line/carriage returns into an element.textContent

Question

We would like to know how to insert new line/carriage returns into an element.textContent.

Answer


<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script type='text/javascript'>
function addText()<!--from   w  w w.  j a  va2s . c  o m-->
{
    document.getElementById('h1').innerHTML+='some more<br />';
}

</script>
</head>
<body>
  <h1 id="h1">test</h1>
  <input type="button" onclick="addText();" value="click" />
</body>
</html>

The code above is rendered as follows: