jQuery replaceAll Method Examples

Want to find out how to replace each target element with the set of matched elements.? Then the .replaceWith() method in jQuery can be used to achieve this. In this article,  I am going to share easy examples that will show how to use the jQuery replaceAll method.

How to use the jQuery replaceAll method

Let’s consider the following example. Let’s assume that we have couple of different elements in a web page such as list item and a heading. We will replace some/all of these items depending upon our requirement. So let’s see how to do this.

Here is the common HTML source code for all the following examples:

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<style type="text/css">
#my_div1  {
	background-color: #3C6;
	border: 1px solid #090;
}

.custom_class {
	background-color: #FC9;
	border: 1px solid #F90;
}	
</style>

<div class="divs_container">

    <ul id="my_list">
    <li class="list_item">Old List Item</li>
    <li>Old List Item</li>    
    </ul>

	<h1 id="my_heading">This is a heading</h1>

</div>    

<p>
<input type="submit" name="sbt_replace_list_text_specific" id="sbt_replace_list_text_specific" value="Replace Specific List Item Using its Class">

<input type="submit" name="sbt_replace_list_text" id="sbt_replace_list_text" value="Replace All List Items">
</p>

<p>    
<input type="submit" name="sbt_replace_heading_with_div" id="sbt_replace_heading_with_div" value="Replace Heading with Div">

<input type="submit" name="sbt_replace_div_with_heading" id="sbt_replace_div_with_heading" value="Replace Div with  Heading">

</p>

This is the basic format of using .replaceWith() method:

$(source).replaceAll(target);

Example 1: Replace Specific List Item With a New List Item Using its Class

	$('#sbt_replace_list_text_specific').on("click", function(e){				

		$('<li>SPECIFIC List Item Replacement</li>').replaceAll('#my_list li.list_item');

		e.preventDefault();

	});

In the above example when the button is clicked, the list item that has a class of ‘list_item’, will be the only one to be completely replaced with a new list item.

Example 2: Replace All List Items With a Totally New set of List Items

	$('#sbt_replace_list_text').on("click", function(e){				

		$('<li>NEW List Item</li>').replaceAll('#my_list li');

		e.preventDefault();

	});

In the above example when the button is clicked, all the existing list items, will be completely replaced with new list items.

Example 3: Replace Heading with Div Using its ID

	$('#sbt_replace_heading_with_div').on("click", function(e){				

		$('<div class="custom_class">This is a DIV</div>').replaceAll('#my_heading');

		e.preventDefault();

	});

In the above example when the button is clicked, the Heading will be replaced with a div. The ID of the heading is used to target it. If you want to, you can even target the heading by just using it’s standard tag, without using any ID or class.

Example 4: Replace Div With Heading Using its Class

	$('#sbt_replace_div_with_heading').on("click", function(e){				

		$('<h1 id="my_heading">This is MY NEW HEADING</h1>').replaceAll('.custom_class');

		e.preventDefault();

	});

In the above example when the button is clicked, the Div that just replaced the Heading in the above example, will be replaced with the heading (h1 tag).

Simple, isn’t it?

Do you know of any other ways to use the jQuery replaceAll method? Feel free to suggest by commenting below.