Hi,
I wanted to use jQuery’s .html() function to replace an unordered list with a paragraph on document load.
However, according to what I learned by reading the API for .html(), this should work
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Replacing html with jQuery/title>
<script src="http://code.jquery.com/jquery-1.4.4.js">
$('nav#mainNavigation').html('<p>The HTML has been changed</p>');
</script>
</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>
Any idea why it does not?
I would appreciate any help very much because this is a simple exercise I am trying to accomplish to fine-tune my skills.
Thanks in Advance & Regards,
Team 1504
rpkamp
November 15, 2010, 5:10pm
2
Does nav#mainNavigation exist at the time that snippet of code is fired?
I believe so.
The HTML code is the code in its entirity.
err or wait
I guess the browser would first read the <script> then it would have to parse the body, which would result in writing the <nav> so, shouldn’t the script be after the <nav> then?
So something like this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Replacing html with jQuery</title>
</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>
<script src="http://code.jquery.com/jquery-1.4.4.js">
$('nav#mainNavigation').html('<p>The HTML has been changed</p>');
</script>
</body>
</html>
Raffles
November 15, 2010, 6:31pm
4
Yes, that should work. But it will create invalid HTML - a UL with a single P as its child. UL elements are only allowed to contain LI elements.
i am trying to replace the <ul> so that it no longer exists and it its place is the <p>
So this:
<nav id="mainNavigation">
<p>The HTML has been changed</p>
</nav>
instead of:
<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>
After playing around with it, I got it working.
It is something like this (btw the changes are in bold):
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“utf-8” />
<title>Replacing html with jQuery/title>
<script src=“http://code.jquery.com/jquery-1.4.4.js ”></script>
<script> $(‘nav#mainNavigation’).html(‘<p>The HTML has been changed</p>’);
</script>
</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>
Raffles
November 15, 2010, 7:42pm
7
Whoops I was wrong about the invalid code - ignore my previous post!