Preserve line breaks when adding template literal to html with JavaScript

Question

How would I preserve the end-of-line characters in the str template literal below when adding to html?

let str = `

          Woke up this morning,
           
           ate a baguette,
           
           smiled at a person and they smiled back.`

document.getElementById("example").innerHTML = `<div>Dreamfit:</div><div>${str}<div>`

<div id="example"></div>

Answer 1

You need to style your div with white-space: pre-wrap:

So your code should look like:

let str = `

          Woke up this morning, 
ate a baguette,
           
           smiled at a person and they smiled back.`

document.getElementById("example").innerHTML = `<div>Dreamfit:</div><div style="white-space: pre-wrap;">${str}<div>`

<div id="example"></div>

Answer 2

You can do this with the <pre> tag:

let str = `<pre>

          Woke up this morning,
           
           ate a baguette,
           
           smiled at a person and they smiled back.</pre>`

document.getElementById("example").innerHTML = `<div>Dreamfit:</div><div>${str}<div>`

<div id="example"></div>

Answer 3

You can use .replace() also as:

let str = `

          Woke up this morning,
           
           ate a baguette,
           
           smiled at a person and they smiled back.`

let html = `<div>Dreamfit:</div><div>${str.replace(/\n/g, '<br>')}<div>`

document.getElementById("example").innerHTML = html

<div id="example"></div>

See the essential part separately here: str.replace(/\n/g, '<br>').