JSFiddle - React, Tailwind, and code Playground

HTML

<!-- does not do the newline or unicode -->
<span id="insertJavascript"></span>

<!--does do the newline and unicode -->
<span id="insertJavascriptWithPre"></span>

<!-- but if i get the string from the HTML to begin with it doesn't work -->
<span id="htmlWithNewline">This is a string that has \n new lines in it\u0027s body</span>
<span id="insertJsHtmlWithNewline">This is a string that has \n new lines in it\u0027s body</span>

JavaScript

$(function(){
    var string = "This is a string that has \n new lines in it\u0027s body";
    
    //does not do the newline or unicode
    document.getElementById("insertJavascript").innerHTML = string;
    
    //does do the newline and unicode
    document.getElementById("insertJavascriptWithPre").innerHTML = '<pre>' + string + '</pre>'; 
    
    //but if i get the string from the HTML to begin with it doesn't work
    var htmlString = document.getElementById("htmlWithNewline").innerHTML;
    document.getElementById("insertJsHtmlWithNewline").innerHTML = '<pre>' + htmlString + '</pre>'; 
});