How do I prevent HTML from ignoring the newline that comes from JavaScript?

I’d like to write my own hackertyper site that prints itself when pressing some keys.

But when I try the code below, it prints everything at the same line. I used template literals (``) and couldn’t make it. Then tried <br /> in the string but also not worked. How do I make it right?

Edit: I was using <p> tag in the HTML file, when I changed it to <pre> tag as Praveen said, it solved my problem. Thank you.

"use strict";

let str = `"use strict"

let str = "";

let emptyStr = "";
let i = 0;
document.addEventListener("keydown", function () {
  emptyStr += str.charAt(i++) + str.charAt(i++) + str.charAt(i++);
  document.querySelector("#string").textContent = emptyStr;
});`;

let emptyStr = "";
let i = 0;
document.addEventListener("keydown", function () {
  emptyStr += str.charAt(i++) + str.charAt(i++) + str.charAt(i++);
  document.querySelector("#string").textContent = emptyStr;
});

<p id="string"></p>

Answer

I guess if you’re trying to print it out, you need to print it out on a <pre> tag or an element with style white-space: pre or similar.

Here’s an example with <pre> tag:

let str = `This is HackerTyper

See I have   spaces and lines!`;

let emptyStr = "";

let i = 0;
document.addEventListener("keydown", function () {
  emptyStr += str.charAt(i++) + str.charAt(i++) + str.charAt(i++);
  document.querySelector("#string").textContent = emptyStr;
});

<pre id="string"></pre>

Here’s the same with white-space: pre for <div>:

let str = `This is HackerTyper

See I have   spaces and lines!`;

let emptyStr = "";

let i = 0;
document.addEventListener("keydown", function () {
  emptyStr += str.charAt(i++) + str.charAt(i++) + str.charAt(i++);
  document.querySelector("#string").textContent = emptyStr;
});

div {
  white-space: pre;
}

<div id="string"></div>

And, finally, just wanted to tell, this is a really good implementation of HackerTyper.