We need to tell jQuery what to do when the document is ready. As we want something to happen, we'll pass in a function as follows:
$(document).ready(function(){ // Our code will go here });We'll write what's going to happen inside this function.
What about that line that starts with
//? That's one way of writing a comment in JavaScript. A//tells JavaScript to ignore everything else on that line because it's a comment. Adding comments to your JavaScript is a great way to help yourself keep track of what's happening on what line. It's also great for helping along other developers who might need to work on your code. It can even be great for helping yourself if you haven't looked at your own code in a few months.Next, we'll add what we want to happen as soon as the document is ready:
$(document).ready(function(){ $('body').append('<p>This paragraph was added with jQuery!</p>'); });
Our function is using the jQuery function again:
$('body')Remember how I said that jQuery uses CSS selectors to find stuff? This is how we use those CSS selectors. In this case, I want the <body> tag, so I'm going to pass 'body' to the jQuery function. This returns the <body> tag wrapped in a jQuery object. Handily, the jQuery object has an append() method that lets me add something new to the page:
$('body').append();All I have to do now is pass the append method the thing I want to add to the page. In quotes, I'll pass in a line of HTML that I'd like to add:
$('body').append('<p>This paragraph was added with jQuery!</p>');And that's it! Now when I load my page in a browser, I'll see my heading followed by two paragraphs—jQuery will add the second paragraph as soon as the document is loaded in the browser:
