J Query file won't work in HTML file

How come when I run this html file in a browser the jquery link that I included doesn’t display a table like this when it runs? The only thing that shows is “THIS IS MY DISPLAY TITLE”!

<!DOCTYPE html>

<html>
    <head>
        <title> All Html Tags</title>
        <meta name="description" content="Free Web Tutorials">
        <meta name="keywords" content="HTML,CSS,XML,Javascript">
        <meta name="author" content="John Doe">
        <meta name="viewport" content="width=device-width, inital-scale=1.0">
        <link href="https://fonts.googleapis.com/css?family=Lobster+Two&display=swap" rel="stylesheet">
        </head>
        <body>
         <h1 style="font-family: 'Lobster Two', cursive; text-transform: lowercase;">THIS IS MY DISPLAY TITLE!!!
        </h1>
        <script
        src="https://code.jquery.com/jquery-2.2.4.min.js"
        integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
        crossorigin="anonymous"></script> 


        </body>
    </html> 

Hello, @micro7894594922.

Welcome to the forums.

I don’t see anything in your HTML that would display a table. I copied your code into codepen.io, and it rendered:
image
which is what I expected.

2 Likes

Hello Midlinder,

Thanks for your reply. Ok I added the following script from a Jquery library and it should display a table right?

Are you expecting a table to be displayed in the browser’s developer tools pane or as part of the rendered page? Merely linking the jquery file in a <script></script> tag will not render anything to the page. It gives you access to the tools available in the jquery library.

Midlinder,

Thanks again for the reply and clarifying what linking the jquery file in a tag won’t do. I was expecting the table to be apart of the rendered page.

what do you mean by table? Html has a <table> element, but i don’t think that is what you mean

what you show in the screenshot is the developers tool, is there something you expect to see there?

stetim94,

Thanks for the reply. I expected to see the developers tool on the browser. The instructor at school had us copy him and copy a jquery link to the html page, update and run it. This I was told would allow us to see developer tool at the bottom of the page as a result.

In the developers tool, you are currently in the network tab. There you can see the jquery file is fetched. If you switch to the elements tab, you should be able to see the <script> element in the html code

I’m using Chrome as the browser to run my html code and I don’t see a network tab. Should I change browsers to see the network tab/element tab? How do I switch to the elements tab? Once I see the script element in the html code and use it will it or will it not get me the developer tool in screenshot. Sorry for this as I’m new to HTML/CSS and Jquery.

how not? That that is the current active tab in your developer tools.

you highlighted that tab in your in screenshot:

The screenshot is what the instructor had on his screen. I didn’t create the same result with my laptop. I just took at picture of what he had.

Check out this link: https://developers.google.com/web/tools/chrome-devtools/open
It will give you several ways to open the developer tools in the chrome browser.

Midlinder,

Thank you very much.

1 Like