Help with jQuery .html() function

JavaScript
1

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 :slight_smile: because this is a simple exercise I am trying to accomplish to fine-tune my skills.

Thanks in Advance & Regards,
Team 1504

2

Does nav#mainNavigation exist at the time that snippet of code is fired?

3

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>
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.

5

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>
6

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>

7

Whoops I was wrong about the invalid code - ignore my previous post!