Search within TutorialsPark

Jquery Parent and Ancestor


Learn to use jQuery to insert Parent and Ancestor Elements to the DOM.


jQuery DOM Manipulation: Inserting Parent and Ancestor Elements

jQuery provides several methods which allows you to insert elements as parents or ancestors of other elements.

This is process is termed as wrapping. It is used to put a wrapped set of elements into another element for the sake of easy handling.


Table : Methods for Wrapping Elements

Method Description
wrap() To wrap the specified element around each of the elements in the jQuery object.
wrapAll() To wrap the specified elements around the set of elements in the jQuery object.
wrapInner() To wrap the specified elements around the set of elements in the jQuery object.
wrap(function)
wrapInner(function)
To wrap elements dynamically using a function.

Wrap Elements Together using wrap() Method

The jQuery Method wrap() is used to wrap a structure of elements around each element in the set of matched elements.

You can pass multiple elements as the arguments, but there must be only one inner element.

Example: Wrap Elements Together using wrap() Method

Give it a TRY! » Note: The wrap() method wraps the inner box with a new larger box.


Wrapping Elements Together using wrapAll() Method

The jQuery method wrapAll() is used to take every element in the set and wrap them all in the new element.

The disadvantage of wrap() method is that new elements get duplicated, and each element get its own new parent, while with wrapAll() you can insert a single parent for several elements.

Example: Wrapping Elements Together using wrapAll() Method

Give it a TRY! » Note: The method wrapAll() returns a wrapped set of elements.


Wrapping the Contents of Elements using wrapInner() Method

The jQuery method wrapInner() is used to wrap elements around the contents of the elements in a jQuery Object.

It inserts new elements between the elements in the jQuery object and their immediate children.

Example: Wrapping the Contents of Elements using wrapInner() method

Give it a TRY! » Note: The method wrapInner() wraps contents , to include text nodes and elements of matched set.


Wrapping Elements using Function wrap(function) Method

You can also pass a function to methods of wrap() and wrapAll(), the argument for this function is the index of the elements in the selected elements.

Example: Wrapping Elements using Function wrap(function) Method

Give it a TRY! » Note: The text string is wrapped within each item in the List.