Help with .html() function

Help with .html() function

Hello guys,
           Can someone please tell me why and help me fix this example of the .html() jQuery function.
What I am trying to do is execute a change in html inside a IE conditional statement.

Here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Replacing html with jQuery</title>
<!--[if lt IE 9]>
<script src="http://code.jquery.com/jquery-1.4.4.js">
 $(document).ready(function () {
$('nav#mainNavigation').html('<p>The HTML has been changed because your browser is less than IE 9.</p>');
});
           <script>
<![endif]-->
</head>
<body>
<nav id="mainNavigation">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
</ul>
</nav>
</body>

</html>

And then I thought that possibly the DOM need the #mainNavigation loaded first before it can execute the script since the script is looking for it and replacing its inner contents, so I did this:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Replacing html with jQuery</title>
  6. </head>
  7. <body>
  8. <nav id="mainNavigation">
  9. <ul>
  10. <li><a href="#">Link 1</a></li>
  11. <li><a href="#">Link 2</a></li>
  12. <li><a href="#">Link 3</a></li>
  13. <li><a href="#">Link 4</a></li>
  14. <li><a href="#">Link 5</a></li>
  15. <li><a href="#">Link 6</a></li>
  16. <li><a href="#">Link 7</a></li>
  17. <li><a href="#">Link 8</a></li>
  18. <li><a href="#">Link 9</a></li>
  19. </ul>
  20. </nav>
  21. <!--[if lt IE 9]>
  22. <script src="http://code.jquery.com/jquery-1.4.4.js">
  23. $(document).ready(function () {
  24. $('nav#mainNavigation').html('<p>The HTML has been changed because your browser is less than IE 9.</p>');
  25. });
  26. <![endif]-->
  27. </script>
  28. </body>

  29. </html>

I know the conditional code is write, but essentially my problem is get the .html() function to work properly. So regardless of the browser conditional statement, in this sample, why doesn't this work:

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

  27. </html>
I would really appreciate it if someone could help me learning how to properly use the .html() function.

Thanks in Advance & Best Regards.