jQuery replaceWith Examples

Want to find out how to replace each element in the set of matched elements with the provided new content and return the set of elements that was removed? Then use the .replaceWith() method in jQuery. In this article  I am going to share easy examples that will show how to use the  jQuery replaceWith method.

How to use jQuery replaceWith 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:

$(target).replaceWith(source);

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

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

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

		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){				

		$('#my_list li').replaceWith('<li>NEW List Item</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){				

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

		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){				

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

		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 replaceWith method? Feel free to suggest by commenting below.