One of the lovely things about jQuery is that it makes it really easy to manipulate content in the page. With just a few method calls, you can quickly add, remove, and replace page elements, as well as move elements around the page’s DOM tree.
In this tutorial you explore various jQuery methods for adding new content to the page. You look at:
- Adding content at the start of an element (or elements) with
prepend()andprependTo() - Adding content at the end of an element (or elements) with
append()andappendTo() - Adding content before an element (or elements) with
before()andinsertBefore() - Adding content after an element (or elements) with
after()andinsertAfter(), and - Wrapping content around an element (or elements), or around an element’s contents, with
wrap(),wrapAll()andwrapInner().
As well as using the above methods, you can also add new content to an element using the html() and text() methods. Find out more in Accessing Element Content with jQuery.
The tutorial’s quite lengthy, but once you understand the basic concepts you’ll find that all the methods work in a similar way. You’ll also find lots of code examples to make things clear. So let’s get started!