The innerText property magically converts newline characters to <br> elements. If you want to just set the text content of an element, you should use, well, textContent.

Apparently, the difference is that "innerText is aware of the rendered appearance of the text, while textContent is not."

Here is a particularly painful example:

const myStyles = `
  body {
    color: green;

const a = document.createElement('style');
a.innerText = myStyles;
a.innerHTML === "<br>body {<br>  color: green;<br>}<br>"; // WAT

const b = document.createElement('style');
b.textContent = myStyles;
b.innerHTML === myStyles; // OK
Final thoughts

Sometimes web development is just awful.

Previous on JavaScript
Mastodon Mastodon