control-freak-ide/Control-Freak-Documentation/jQuery/docs/entries/replaceAll.json
plastic-hub-dev-node-saturn 538369cff7 latest
2021-05-12 18:35:18 +02:00

1 line
2.1 KiB
JSON

{"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$( \"<b>Paragraph. </b>\" ).replaceAll( \"p\" );\n","html":"\n<p>Hello</p>\n<p>cruel</p>\n<p>World</p>\n"},"longdesc":"\n <p>The <code>.replaceAll()</code> method is corollary to <code><a href=\"/replaceWith/\">.replaceWith()</a></code>, but with the source and target reversed. Consider this DOM structure:</p>\n <pre><code>\n&lt;div class=\"container\"&gt;\n &lt;div class=\"inner first\"&gt;Hello&lt;/div&gt;\n &lt;div class=\"inner second\"&gt;And&lt;/div&gt;\n &lt;div class=\"inner third\"&gt;Goodbye&lt;/div&gt;\n&lt;/div&gt;\n </code></pre>\n <p>We can create an element, then replace other elements with it:</p>\n <pre><code>$( \"&lt;h2&gt;New heading&lt;/h2&gt;\" ).replaceAll( \".inner\" );</code></pre>\n <p>This causes all of them to be replaced:</p>\n <pre><code>\n&lt;div class=\"container\"&gt;\n &lt;h2&gt;New heading&lt;/h2&gt;\n &lt;h2&gt;New heading&lt;/h2&gt;\n &lt;h2&gt;New heading&lt;/h2&gt;\n&lt;/div&gt;\n </code></pre>\n <p>Or, we could select an element to use as the replacement:</p>\n <pre><code>\n$( \".first\" ).replaceAll( \".third\" );\n </code></pre>\n <p>This results in the DOM structure:</p>\n <pre><code>\n&lt;div class=\"container\"&gt;\n &lt;div class=\"inner second\"&gt;And&lt;/div&gt;\n &lt;div class=\"inner first\"&gt;Hello&lt;/div&gt;\n&lt;/div&gt;\n </code></pre>\n <p>From this example, we can see that the selected element replaces the target by being moved from its old location, not by being cloned.</p>\n "}]}