.html() function not working in conditional comment

.html() function not working in conditional comment

Hey guys,
             I was hoping someone here could help me get this simple exercise done. It invovles changing the html using jQuery when the browser is less than IE9

I was messing with the .html() jQuery function that I have used before and was having some problems, but I got help in this post
With this code, it runs in all browsers:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Replacing html with jQuery</title>
  6. <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
  7. <script>
  8. $(document).ready(function () {
  9. $('nav#mainNavigation').html('<p>The HTML has been changed because the browser you are using is less than IE 9</p>');
  10. });
  11. </script>
  12. </head>
  13. <body>
  14. <nav id="mainNavigation">
  15. <ul>
  16. <li><a href="#">Link 1</a></li>
  17. <li><a href="#">Link 2</a></li>
  18. <li><a href="#">Link 3</a></li>
  19. <li><a href="#">Link 4</a></li>
  20. <li><a href="#">Link 5</a></li>
  21. <li><a href="#">Link 6</a></li>
  22. <li><a href="#">Link 7</a></li>
  23. <li><a href="#">Link 8</a></li>
  24. <li><a href="#">Link 9</a></li>
  25. </ul>
  26. </nav>

  28. </body>

  30. </html>

Then, I used the conditional comment for Internet Explorer so that the code is only read if the browsers is less than Internet explorer 9. I am pretty sure and according to this my conditional comment code is fine, but for some reason when I try it in IE8, the .html() function is not executing and therefore not replacing the <u/> in the <nav> with a <p> in said <nav>

Here is the code with the conditional comment:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Replacing html with jQuery</title>
  6. <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
  7. <!--[if lt IE 9]>
  8. <script>
  9. $(document).ready(function () {
  10. $('nav#mainNavigation').html('<p>The HTML has been changed because the browser you are using is less than IE 9</p>');
  11. });
  12. </script>
  13. <![endif]-->
  14. </head>
  15. <body>
  16. <nav id="mainNavigation">
  17. <ul>
  18. <li><a href="#">Link 1</a></li>
  19. <li><a href="#">Link 2</a></li>
  20. <li><a href="#">Link 3</a></li>
  21. <li><a href="#">Link 4</a></li>
  22. <li><a href="#">Link 5</a></li>
  23. <li><a href="#">Link 6</a></li>
  24. <li><a href="#">Link 7</a></li>
  25. <li><a href="#">Link 8</a></li>
  26. <li><a href="#">Link 9</a></li>
  27. </ul>
  28. </nav>

  30. </body>

  32. </html>
Does anyone have any idea why it is not executing the function in the condition comment when it is run in a version of IE less than 9 like it is supposed to.
Is it possible that maybe the script should be in a separate file and just be linked?
Is there a conflict between the JQuery syntax and the condition comment?


I hope someone could help, I would appreciate it a lot as I have to get this done soon.

Thanks in Advance & Best Regards