Search within TutorialsPark

Jquery Replacing Elements


Learn to use jQuery to replace one set of elements with another.


jQuery DOM Manipulation: Replacing Elements

jQuery provides several methods which allows you to replace as set of element using another elements.


Table : Methods for Wrapping Elements

Method Description
replaceWith() To replace the elements in the jQuery object with the specified content.
replaceAll() To replace the elements specified by the argument with the element in the jQuery object.
replaceWith(function) To replace the elements in the jQuery object dynamically using a function.

Replacing Elements using replaceWith() Method

The jQuery Method replaceWith() is used to replace the elements in the jQuery object with the content specified as argument in the method.

Example: Replacing Element using replaceWith() Method

Give it a TRY! » Note: The parameters of the method can be an element, HTML string or jQuery Object.


Replace Elements using replaceAll() Method

The method replaceAll() is used to select elements into the document so that they replace each target element, cloning the selected elements as needed if there is more than one target.

The method replaceAll() works similar to replaceWith() method , the only difference is that the role of the jQuery object and arguments are reversed.

Example: Replace Elements using replaceAll() Method

Give it a TRY! » Note: It replaced all img elements with the image specified in the Selector.


Replace Elements using replaceWith(function)

The jQuery method of replaceWith(function) is used to replace each selected element by invoking a function, which is used as an argument for the method

Example: Replace Elements using replaceWith(function)

Give it a TRY! » Note: The script replaces all list items with the text specified in the function.