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
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.