Type new line character in Element.TextContent

Question

I am trying to generate a textual content in a web application. I want a text to appear into a header element <h1> but the text must contain newline breaks.

First attempt

var el = document.getElementById("myel");
var newline = "\r\n";
var nbsp = "\u00a0";
el.textContent = "My awesome" + newline + "web" + nbsp + "application";

This is not working. I mean in the developer tools, by inspecting the DOM, I can see the text being broken between "awesome" and "web", but the browser does not render it that way: the text is all on the same line but at least the non breaing space (which is correctly rendered like &nbsp) is there.

Trying <br/>.

If I try to use <br/>, I must use innerHTML:

var el = document.getElementById("myel");
var newline = "<br/>";
var nbsp = "&nbsp";
el.innerHTML = "My awesome" + newline + "web" + nbsp + "application";

So there is no way I can get my problem solved by using textContent? I would really like avoiding innerHTML.

Answer 1

Use CSS white-space: pre; with "\r\n":

var el = document.getElementById("myel");
var newline = "\r\n";
var nbsp = "\u00a0";
el.textContent = "My awesome" + newline + "web" + nbsp + "application";

#myel {
  white-space: pre;
}

<h1 id="myel"></h1>