1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
|
<!DOCTYPE html>
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
<div class="entry-content">
<div class="entry-title roundTop">
<h1 class="jq-clearfix">.replaceWith()</h1>
<div class="entry-meta jq-clearfix">
Categories:
<span class="category"><a href="http://api.jquery.com/category/manipulation/" title="View all posts in Manipulation">Manipulation</a> > <a href="http://api.jquery.com/category/manipulation/dom-replacement/" title="View all posts in DOM Replacement">DOM Replacement</a></span>
</div>
</div>
<div id="replaceWith1" class="entry method">
<h2 class="jq-clearfix roundTop section-title">
<span class="name">.replaceWith( newContent )</span> <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#jQuery">jQuery</a></span>
</h2>
<div class="jq-box roundBottom entry-details">
<p class="desc"><strong>Description: </strong>Replace each element in the set of matched elements with the provided new content.</p>
<ul class="signatures">
<li class="signature" id="replaceWith-newContent">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.2/">1.2</a></span>.replaceWith( newContent )</h4>
<p class="arguement"><strong>newContent</strong>The content to insert. May be an HTML string, DOM element, or jQuery object.</p>
</li>
<li class="signature" id="replaceWith-function">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>.replaceWith( function )</h4>
<p class="arguement"><strong>function</strong>A function that returns content with which to replace the set of matched elements.</p>
</li>
</ul>
<div class="longdesc">
<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>
<pre><div class="container">
<div class="inner first">Hello</div>
<div class="inner second">And</div>
<div class="inner third">Goodbye</div>
</div></pre>
<p>The second inner <code><div></code> could be replaced with the specified HTML:</p>
<pre>$('div.second').replaceWith('<h2>New heading</h2>');</pre>
<p>This results in the structure:</p>
<pre><div class="container">
<div class="inner first">Hello</div>
<h2>New heading</h2>
<div class="inner third">Goodbye</div>
</div></pre>
<p><em>All</em> inner <code><div></code> elements could be targeted at once:</p>
<pre>$('div.inner').replaceWith('<h2>New heading</h2>');</pre>
<p>This causes all of them to be replaced:</p>
<pre><div class="container">
<h2>New heading</h2>
<h2>New heading</h2>
<h2>New heading</h2>
</div></pre>
<p>An element could also be selected as the replacement:</p>
<pre>$('div.third').replaceWith($('.first'));</pre>
<p>This results in the DOM structure:</p>
<pre><div class="container">
<div class="inner second">And</div>
<div class="inner first">Hello</div>
</div></pre>
<p>This example demonstrates that the selected element replaces the target by being moved from its old location, not by being cloned.</p>
<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>
<p>As of jQuery 1.4, <code>.replaceWith()</code> can also work on disconnected DOM nodes. For example, with the following code, <code>.replaceWith()</code> returns a jQuery set containing only a paragraph.:</p>
<pre>$("<div/>").replaceWith("<p></p>");</pre>
<p>The <code>.replaceWith()</code> method can also take a function as its argument:</p>
<pre>$('div.container').replaceWith(function() {
return $(this).contents();
});</pre>
<p>This results in <code><div class="container"></code> being replaced by its three child <code><div></code>s. The return value of the function may be an HTML string, DOM element, or jQuery object.</p>
</div>
<h3>Examples:</h3>
<div class="entry-examples" id="entry-examples">
<div id="example-0">
<h4>Example: <span class="desc">On click, replace the button with a div containing the same word.</span>
</h4>
<pre class="prettyprint"><code class="example demo-code"><!DOCTYPE html>
<html>
<head>
<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>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
</head>
<body>
<button>First</button>
<button>Second</button>
<button>Third</button>
<script>
$("button").click(function () {
$(this).replaceWith( "<div>" + $(this).text() + "</div>" );
});
</script>
</body>
</html></code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div id="example-1">
<h4>Example: <span class="desc">Replace all paragraphs with bold words.</span>
</h4>
<pre class="prettyprint"><code class="example demo-code"><!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<script>
$("p").replaceWith( "<b>Paragraph. </b>" );
</script>
</body>
</html></code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div id="example-2">
<h4>Example: <span class="desc">On click, replace each paragraph with a div that is already in the DOM and selected with the $() function. Notice it doesn't clone the object but rather moves it to replace the paragraph.</span>
</h4>
<pre class="prettyprint"><code class="example demo-code"><!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-1.7rc2.js"></script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<div>Replaced!</div>
<script>
$("p").click(function () {
$(this).replaceWith( $("div") );
});
</script>
</body>
</html></code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div id="example-3">
<h4>Example: <span class="desc">On button click, replace the containing div with its child divs and append the class name of the selected element to the paragraph.</span>
</h4>
<pre class="prettyprint"><code class="example demo-code"><!DOCTYPE html>
<html>
<head>
<style>
.container { background-color: #991; }
.inner { color: #911; }
</style>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
</head>
<body>
<p>
<button>Replace!</button>
</p>
<div class="container">
<div class="inner">Scooby</div>
<div class="inner">Dooby</div>
<div class="inner">Doo</div>
</div>
<script>
$('button').bind("click", function() {
var $container = $("div.container").replaceWith(function() {
return $(this).contents();
});
$("p").append( $container.attr("class") );
});
</script>
</body>
</html></code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
</div>
</div>
</div>
</div>
</body></html>
|
