How to programatically add line break to a paragraph tag

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:

<!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js -->

document.getElementById('1').textContent = "\n".repeat(6)
document.getElementById('2').textContent = "<br/>".repeat(6)

<!-- language: lang-css -->

p {
  border: 1px solid black;
}

<!-- language: lang-html -->

<h2>Set <code>\n</code></h2>
<p id="1"></p>

<h2>Set <code>&lt;br/&gt;</code></h2>
<p id="2"></p>

<!-- end snippet -->

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?

Encoding

• textContent will escape the values you pass.
• 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

<!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js -->

document.getElementById('1').textContent = "<br/>".repeat(6)
document.getElementById('2').innerHTML = "<br/>".repeat(6)

<!-- language: lang-css -->

p {
  border: 1px solid black;
}

<!-- language: lang-html -->

<h2>Set <code>textContent</code></h2>
<p id="1"></p>

<h2>Set <code>innerHTML</code></h2>
<p id="2"></p>

<!-- end snippet -->