{"name":"replaceAll","type":"method","title":".replaceAll()","deprecated":null,"removed":null,"desc":"Replace each target element with the set of matched elements.","categories":["manipulation/dom-replacement","version/1.2"],"entries":[{"return":"jQuery","signatures":{"added":"1.2","argument":{"desc":"A selector string, jQuery object, DOM element, or array of elements indicating which element(s) to replace.","type":[{"name":"Selector"},{"name":"jQuery"},{"name":"Array"},{"name":"Element"}],"name":"target"}},"examples":{"desc":"Replace all the paragraphs with bold words.","code":"\n$( \"Paragraph. \" ).replaceAll( \"p\" );\n","html":"\n

Hello

\n

cruel

\n

World

\n"},"longdesc":"\n

The .replaceAll() method is corollary to .replaceWith(), but with the source and target reversed. Consider this DOM structure:

\n 
\n<div class=\"container\">\n  <div class=\"inner first\">Hello</div>\n  <div class=\"inner second\">And</div>\n  <div class=\"inner third\">Goodbye</div>\n</div>\n
\n

We can create an element, then replace other elements with it:

\n 
$( \"<h2>New heading</h2>\" ).replaceAll( \".inner\" );
\n

This causes all of them to be replaced:

\n 
\n<div class=\"container\">\n  <h2>New heading</h2>\n  <h2>New heading</h2>\n  <h2>New heading</h2>\n</div>\n
\n

Or, we could select an element to use as the replacement:

\n 
\n$( \".first\" ).replaceAll( \".third\" );\n
\n

This results in the DOM structure:

\n 
\n<div class=\"container\">\n  <div class=\"inner second\">And</div>\n  <div class=\"inner first\">Hello</div>\n</div>\n
\n

From this example, we can see that the selected element replaces the target by being moved from its old location, not by being cloned.

\n "}]}