The <h1> element on this page is created with jQuery.

Here's the script that does the work:

<!-- load jQuery from Google CDN -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/
jquery.min.js"></script> <script> $(document).ready(function(){ $("<h1>Hello World!</h1>").prependTo("#wrapper"); }); </script>

In this example, the jQuery function (abbreviated as $) creates and selects a new element. Then, in the same line of code, it uses the .prependTo method to add the new element to the top of the #wrapper element. The jQuery version of "Hello World!" is just as simple as the JavaScript version but it's a whole lot smarter because we can choose exactly where in our document to place the newly created element.

The options we can use include:
.prependTo – adds the new elenment as a child and at the top of the target element.
.appendTo – adds the new element as a child and at the bottom of the target element.
.insertBefore – adds the new element as a sibling before the target element.
.insertAfter – adds the new element as a sibling before the target element.

Using the options above, any new element can be placed anywhere within a given document. That's really cool.

Here's a schematic to illustrate the above options:

   .insertBefore("#wrapper")

<div id="wrapper">

   .prependTo("#wrapper")

<p id="change_me">Lorem ipsum dolor sit amet…</p>

   .appendTo("#wrapper")

</div>

   .insertAfter("#wrapper")

This is just one of the many ways that jQuery makes life easier for designers who find JavaScript a bit complicated.

Notice that all jQuery statements are wrapped in the $(document).ready function. This ensures that the whole page has loaded and the DOM is complete before and changes take place. This is important for jQuery because much of what it does relies on accurately traversing the DOM.

Note: In this example, the script is shown as it would appear if placed in the HTML file and is done only for convenience in demonstrating how it works. The best practice solution would be to place the script in an external file and call it like this:

<script src="filename.js"></script>

jQuery selectors work in exactly the same way as CSS selectors, so the script will work just as well from an external .js file as it will from the .html file.