Jquery IE8 issues with .html

Question

Its been a struggle to get this script to work. In my IE8 and Firefox page I have characters that are not rendering on my page such as <>&"' and shows up as <>&"'. I created the following script to fix this.

<script type="text/javascript"> 
$( document ).ready(function() {
$(".custom_pre").each(function() {
   var $this = $(this);
   $this.html($this.text());

});  
});
</script>

It does render the text in Firefox and IE8 but removes all my line breaks so it's just once big block of text. I was able to fix it in Firefox by simply adding white-space: pre-wrap but no good in IE8. If I remove my script the line breaks remain intact. I did a bit of research and found this threads that seems similar to my case. JQuery .html() remove line break on IE 8

So I tried the following suggested script.

itemDescription = itemDescription.replace(/(\r\n|\r|\n)/g, '________BREAK________');
var decodedDescription = $(".custom_pre").html(itemDescription).text();
decodedDescription = decodedDescription.replace(/________BREAK________/g, '\r\n');

This does not render my special characters and dosen't seem to do anything. At the moment I have TD cells containing the data and they each have a class named ".custom_pre".

Would anyone have any idea what im missing?