SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question Help with jQuery .html() function

    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
    Code HTML4Strict:
    <!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

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    8,892
    Mentioned
    138 Post(s)
    Tagged
    2 Thread(s)
    Does nav#mainNavigation exist at the time that snippet of code is fired?
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb

    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?

    Code HTML4Strict:
    <!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. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    i am trying to replace the <ul> so that it no longer exists and it its place is the <p>

    So this:
    Code HTML4Strict:
    <nav id="mainNavigation">
            <p>The HTML has been changed</p>
    </nav>

    instead of:
    Code HTML4Strict:
    <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. #6
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Whoops I was wrong about the invalid code - ignore my previous post!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •