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.