Internet Explorer and href text -> space removed beyond end of link

Internet Explorer and href text -> space removed beyond end of link

Hello - I'm an absolute beginner with Javascript and JQuery, and my HTML knowledge is rudimentary at best, so bear with me!

This is a vastly simplified version of what I have on the page I'm having trouble with. When I use JQuery to add text to a hyperlink that previously had no text, and which is followed on the page by a space then some other page text, the space just after the hyperlink is removed in Internet Explorer (it's preserved in Firefox). This is a purely aesthetic issue, but it's annoying.

So, if that didn't make much sense, in the snippet below, the space just after the closing </span> and the text "my link" is removed in Internet Explorer when I set the hyperlink .text().

Any way around this? Thank you in advance!

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="jquery-1.9.1.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function() 
  6. {
  7.   $('.myclass a').each(function()
  8.   {
  9.     $(this).attr("href", "http://www.example.com");
  10.     $(this).attr("title", "Example dot com");
  11.     $(this).text("Example dot com");
  12.   });
  13. });
  14. </script>
  15. </head>
  16.   Testing <span class="myclass"><a></a></span> my link
  17. </html>