## Encoding

* [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) will escape the values you pass.
* [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) will perserve the string as html

## Whitespace

`\n` will add a new line, but since html is whitepsace agnostic, it won't show up by default inside of a `<p>` tag.  If you want to add line breaks, you can use `<br/>` instead

## Demo in Stack Snippets





    document.getElementById('1').textContent = "<br/>".repeat(6)
    document.getElementById('2').innerHTML = "<br/>".repeat(6)



    p {
      border: 1px solid black;
    }



    <h2>Set <code>textContent</code></h2>
    <p id="1"></p>

    <h2>Set <code>innerHTML</code></h2>
    <p id="2"></p>

I want to apply a line break to a dom element programatically.

I have tried to used `<br>`, `<br/>` and `\n` from different answers of solving this problem. 

However, none of them work. 

Here is an example:





    document.getElementById('1').textContent = "\n".repeat(6)
    document.getElementById('2').textContent = "<br/>".repeat(6)



    p {
      border: 1px solid black;
    }



    <h2>Set <code>\n</code></h2>
    <p id="1"></p>

    <h2>Set <code>&lt;br/&gt;</code></h2>
    <p id="2"></p>



The `<br>`, `<br/>` will appear in the `textContent`, but doesn't apply the line break.

The `\n` doesn't appear in the `textContent`, and also doesn't apply the line break.

Do anyone know how to solve this problem?