Search code examples
javascripthtmlwhitespaceline-breaks

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:

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?

Solution

  • Encoding

    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>