We're going to use jQuery to add some text to our HTML page.
This lesson doesn't render as a lab, but there are files within this repository you'll need to code along. Click on the GitHub icon in Learn, and fork and clone this repository into your IDE.
In order to start writing jQuery, we need to include the library in our HTML. One way to do this would be to download a copy of the jQuery library and include it with our project. We can also link to the library hosted by a content delivery network, or CDN. For this example, we'll be loading jQuery from Google's CDN. Copy the code below and paste it in
html/index.html at the very bottom of the HTML
body (right above the
</body> close tag). This
script tag links our HTML file to the jQuery library.
Go ahead and open
html/index.html in the browser. To do this in the IDE, you'll want to run the
httpserver command in the terminal. You should see something like this:
Serving HTTP on 126.96.36.199:3107. Paste 188.8.131.52:3107 into your browser's URL bar and you should see a list of files and directories. Click on the one that says
html and you should see really boring looking website with the text
yo yo yo yo yo yo yo.
We want to add the text
hey hey hey hey!!!!! to the end of our paragraph.
script tag that loads jQuery, right before the closing
body tag, we'll want to add an opening and a closing
Between these tags is where we want to write our inline jQuery. The script tags need to be at the bottom of the page because the code we're going to write is dependent on the
p tag being already loaded in the browser. Our jQuery will error if there isn't a
p tag to add text to.
And now, in between the script tags, add the following code:
$("#yo").append("hey hey hey hey!!!!!");
Save the changes to
html/index.html and reload in the browser. You should see
yo yo yo yo yo yo yo hey hey hey hey!!!!! on the page!!
$ is just a function — it's equivalent to
jQuery (which is also a function that you can call). You might think of it as a fancy alias (with a few tricks up its sleeve) to
"#yo" is our jQuery selector -- we're selecting the HTML element with the ID
yo. We're then using the jQuery
append function, which adds text to an HTML element, and we're passing in
"hey hey hey hey!!!!!" which is the text we want to add.
Don't worry too much about the mechanics of these selectors and functions, we'll go over those in way more detail. Just notice that the text appeared on the screen, even though we didn't explicitly add it between the
View Modify HTML With jQuery on Learn.co and start learning to code for free.