jQuery Tutorial
jQuery Introduction jQuery Getting Started jQuery Syntax jQuery Selectors jQuery Events
jQuery Effects
jQuery Hide/Show jQuery Fade jQuery Slide jQuery Animation jQuery stop() jQuery Callback jQuery Chaining
jQuery Manipulation
jQuery Get/Set jQuery Add jQuery Remove jQuery CSS Classes jQuery css() jQuery Dimensions
jQuery Traversing
jQuery Traversing jQuery Ancestors jQuery Descendants jQuery Siblings jQuery Filtering
jQuery AJAX
jQuery AJAX Intro jQuery Load jQuery Get/Post jQuery AJAX Events
jQuery Misc
jQuery noConflict() jQuery Filters
jQuery References
jQuery Reference jQuery Selectors jQuery Events jQuery Effects jQuery HTML/CSS jQuery Traversing jQuery AJAX jQuery Miscellaneous jQuery Properties

jQuery - Add Elements

One very important part of jQuery is the possibility to manipulate the DOM.

jQuery provides methods to add new HTML elements in efficient way.

In this chapter we will explain how to add new HTML elements/content to the DOM.


jQuery Add New HTML Content

With jQuery we can easily add new HTML elements.

We have the following jQuery methods that are used to add new content:

The following section will show you how to use each method.


jQuery append() Method

The jQuery append() method inserts the specified content at the end (as the last child) of each selected element.

The following example appends some text content to all paragraphs:

Run code

The following example appends some HTML to all paragraphs:

Run code

jQuery prepend() Method

The jQuery prepend() method inserts the specified content at the beginning (as the first child) of each selected element.

The following example prepends some text content to all paragraphs:

Run code

The following example prepends some HTML to all paragraphs:

Run code

Adding Multiple Elements With append() and prepend()

In the examples above, we have only inserted some text/HTML at the beginning/end of the selected HTML elements.

However, both the append() and prepend() methods can take an infinite number of new elements as parameters.

The new elements can be generated with HTML elements (like in the examples above), with DOM elements or with jQuery objects.

In the following example, we create several new elements using HTML elements, DOM elements and jQuery objects:

Run code

jQuery after() Method

The jQuery after() method inserts specified content after the selected elements.

The following example inserts content after each paragraph:

Run code

jQuery before() Method

The jQuery before() method inserts specified content before the selected elements.

The following example inserts content before each paragraph:

Run code

Adding Multiple Elements With after() and before()

Also, both the after() and before() methods can take an infinite number of new elements as parameters.

The new elements can be generated with HTML elements (like in the examples above), with DOM elements or with jQuery objects.

In the following example, we create several new elements using HTML elements, DOM elements and jQuery objects:

Run code

jQuery wrap() Method

The jQuery wrap() method wraps specified HTML structure around each selected element.

The following example wraps a DIV element around each <p> element:

Run code

jQuery HTML Reference

For a complete HTML methods reference, visit our jQuery HTML/CSS Reference.