1 line
4.8 KiB
JSON
1 line
4.8 KiB
JSON
{"name":"replaceWith","type":"method","title":".replaceWith()","deprecated":null,"removed":null,"desc":"Replace each element in the set of matched elements with the provided new content and return the set of elements that was removed.","categories":["manipulation/dom-replacement","version/1.2","version/1.4"],"entries":[{"return":"jQuery","signatures":[{"added":"1.2","argument":{"desc":"The content to insert. May be an HTML string, DOM element, array of DOM elements, or jQuery object.","type":[{"name":"htmlString"},{"name":"Element"},{"name":"Array"},{"name":"jQuery"}],"name":"newContent"}},{"added":"1.4","argument":{"desc":"A function that returns content with which to replace the set of matched elements.","name":"function","type":"Function"}}],"examples":[{"desc":"On click, replace the button with a div containing the same word.","code":"\n$( \"button\" ).click(function() {\n $( this ).replaceWith( \"<div>\" + $( this ).text() + \"</div>\" );\n});\n","css":"\n button {\n display: block;\n margin: 3px;\n color: red;\n width: 200px;\n }\n div {\n color: red;\n border: 2px solid blue;\n width: 200px;\n margin: 3px;\n text-align: center;\n }\n","html":"\n<button>First</button>\n<button>Second</button>\n<button>Third</button>\n"},{"desc":"Replace all paragraphs with bold words.","code":"\n$( \"p\" ).replaceWith( \"<b>Paragraph. </b>\" );\n","html":"\n<p>Hello</p>\n<p>cruel</p>\n<p>World</p>\n"},{"desc":"On click, replace each paragraph with a div that is already in the DOM and selected with the <code>$()</code> function. Notice it doesn't clone the object but rather moves it to replace the paragraph.","code":"\n$( \"p\" ).click(function() {\n $( this ).replaceWith( $( \"div\" ) );\n});\n","css":"\n div {\n border: 2px solid blue;\n color: red;\n margin: 3px;\n }\n p {\n border: 2px solid red;\n color: blue;\n margin: 3px;\n cursor: pointer;\n }\n","html":"\n <p>Hello</p>\n <p>cruel</p>\n <p>World</p>\n <div>Replaced!</div>\n"},{"desc":"On button click, replace the containing div with its child divs and append the class name of the selected element to the paragraph.","code":"\n$( \"button\" ).on( \"click\", function() {\n var $container = $( \"div.container\" ).replaceWith(function() {\n return $( this ).contents();\n });\n\n $( \"p\" ).append( $container.attr( \"class\" ) );\n});\n","css":"\n .container {\n background-color: #991;\n }\n .inner {\n color: #911;\n }\n","html":"\n<p>\n <button>Replace!</button>\n</p>\n<div class=\"container\">\n <div class=\"inner\">Scooby</div>\n <div class=\"inner\">Dooby</div>\n <div class=\"inner\">Doo</div>\n</div>\n"}],"longdesc":"\n <p>The <code>.replaceWith()</code> method removes content from the DOM and inserts new content in its place with a single call. Consider this DOM structure:</p>\n <pre><code>\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 </code></pre>\n <p>The second inner <code><div></code> could be replaced with the specified HTML:</p>\n <pre><code>\n$( \"div.second\" ).replaceWith( \"<h2>New heading</h2>\" );\n </code></pre>\n <p>This results in the structure:</p>\n <pre><code>\n<div class=\"container\">\n <div class=\"inner first\">Hello</div>\n <h2>New heading</h2>\n <div class=\"inner third\">Goodbye</div>\n</div>\n </code></pre>\n <p><em>All</em> inner <code><div></code> elements could be targeted at once:</p>\n <pre><code>\n$( \"div.inner\" ).replaceWith( \"<h2>New heading</h2>\" );\n </code></pre>\n <p>This causes all of them to be replaced:</p>\n <pre><code><div class=\"container\">\n <h2>New heading</h2>\n <h2>New heading</h2>\n <h2>New heading</h2>\n</div>\n </code></pre>\n <p>An element could also be selected as the replacement:</p>\n <pre><code>\n$( \"div.third\" ).replaceWith( $( \".first\" ) );\n </code></pre>\n <p>This results in the DOM structure:</p>\n <pre><code>\n<div class=\"container\">\n <div class=\"inner second\">And</div>\n <div class=\"inner first\">Hello</div>\n</div>\n </code></pre>\n <p>This example demonstrates that the selected element replaces the target by being moved from its old location, not by being cloned.</p>\n <p>The <code>.replaceWith()</code> 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 <em>original</em> jQuery object is returned. This object refers to the element that has been removed from the DOM, not the new element that has replaced it.</p>\n "}]} |