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.
<!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:
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:
Thanks in Advance & Best Regards.