.replaceAll()
Returns: jQuery
Description: Replace each target element with the set of matched elements.
.replaceAll()
version added: 1.2
The .replaceAll() method is corollary to .replaceWith(), but with the source and target reversed. 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 create an element, then replace other elements with it:
$('<h2>New heading</h2>').replaceAll('.inner');
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:
$('.first').replaceAll('.third');
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.
Examples
Replace all the paragraphs with bold words.$("<b>Paragraph. </b>").replaceAll("p"); // check replaceWith() examples
Full source:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("<b>Paragraph. </b>").replaceAll("p"); // check replaceWith() examples }); </script> </head> <body> <p>Hello</p> <p>cruel</p> <p>World</p> </body> </html>
Was this information helpful?
