.replaceWith( newContent )
Returns: jQuery
Description: Replace each element in the set of matched elements with the provided new content.
.replaceWith( newContent )
version added: 1.2
The content to insert. May be an HTML string, DOM element, or jQuery object.
.replaceWith( function )
version added: 1.4
function
A function that returns an HTML string to replace the set of matched elements with.
The .replaceWith() method allows us to remove content from the DOM and insert new content in its place with a single call. Consider this DOM structure:
<div class="container"> <div class="inner first">Hello</div> <div class="inner second">And</div> <div class="inner third">Goodbye</div> </div>
We can replace the second inner <div> with specified HTML:
$('.second').replaceWith('<h2>New heading</h2>');
This results in the structure:
<div class="container"> <div class="inner first">Hello</div> <h2>New heading</h2> <div class="inner third">Goodbye</div> </div>
We could equally target all inner <div> elements at once:
$('.inner').replaceWith('<h2>New heading</h2>');
This causes all of them to be replaced:
<div class="container"> <h2>New heading</h2> <h2>New heading</h2> <h2>New heading</h2> </div>
Or, we could select an element to use as the replacement:
$('.third').replaceWith($('.first'));
This results in the DOM structure:
<div class="container"> <div class="inner second">And</div> <div class="inner first">Hello</div> </div>
From this example, we can see that the selected element replaces the target by being moved from its old location, not by being cloned.
The .replaceWith() method, like most jQuery methods, returns the jQuery object so that other methods can be chained onto it. However, it must be noted that the
In jQuery 1.4 .replaceWith(), .before(), and .after() can also work on disconnected DOM nodes. For example, with the following code:
$("<div/>").replaceWith("<p></p>");
The .replaceWith() method returns a jQuery set containing only a paragraph.
Examples
Example 1
On click, replace the button with a div containing the same word. $("button").click(function () {
$(this).replaceWith("<div>" + $(this).text() + "</div>");
});
Example 1 - Full source:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("button").click(function () { $(this).replaceWith("<div>" + $(this).text() + "</div>"); }); }); </script> <style> button { display:block; margin:3px; color:red; width:200px; } div { color:red; border:2px solid blue; width:200px; margin:3px; text-align:center; } </style> </head> <body> <button>First</button> <button>Second</button> <button>Third</button> </body> </html>
Example 2
Replace all the paragraphs with bold words.$("p").replaceWith("<b>Paragraph. </b>");
Example 2 - Full source:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $("p").replaceWith("<b>Paragraph. </b>"); }); </script> </head> <body> <p>Hello</p> <p>cruel</p> <p>World</p> </body> </html>
Example 3
Replace all the paragraphs with empty div elements.
$("p").replaceWith(document.createElement("div"));
Example 3 - Full source:
<!DOCTYPE html>
<html>
<head>
<style>
div { border:2px solid blue; margin:3px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("p").replaceWith(document.createElement("div"));
});
</script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<script>$("p").replaceWith(document.createElement("div"));</script>
</body>
</html>
Example 4
On click, replace each paragraph with a jQuery div object that is already in the DOM. Notice it doesn't clone the object but rather moves it to replace the paragraph.Example 4 - Full source:
<!DOCTYPE html>
<html>
<head>
<style>
div { border:2px solid blue; color:red; margin:3px; }
p { border:2px solid red; color:blue; margin:3px; cursor:pointer; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("p").click(function () {
$(this).replaceWith($("div"));
});
});
</script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<div>Replaced!</div>
</body>
</html>
Was this information helpful?
