|
20 | 20 | <longdesc> |
21 | 21 | <p>The <code>.after()</code> and <code><a href="/insertAfter">.insertAfter()</a></code> methods perform the same task. The major difference is in the syntax—specifically, in the placement of the content and target. With<code> .after()</code>, the selector expression preceding the method is the container after which the content is inserted. With <code>.insertAfter()</code>, on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted after the target container.</p> |
22 | 22 | <p>Using the following HTML:</p> |
23 | | - <pre><div class="container"> |
| 23 | + <pre><code><div class="container"> |
24 | 24 | <h2>Greetings</h2> |
25 | 25 | <div class="inner">Hello</div> |
26 | 26 | <div class="inner">Goodbye</div> |
27 | | -</div></pre> |
| 27 | +</div></code></pre> |
28 | 28 | <p>Content can be created and then inserted after several elements at once:</p> |
29 | | - <pre>$('.inner').after('<p>Test</p>');</pre> |
| 29 | + <pre><code>$('.inner').after('<p>Test</p>');</code></pre> |
30 | 30 | <p>Each inner <code><div></code> element gets this new content:</p> |
31 | | - <pre><div class="container"> |
| 31 | + <pre><code><div class="container"> |
32 | 32 | <h2>Greetings</h2> |
33 | 33 | <div class="inner">Hello</div> |
34 | 34 | <p>Test</p> |
35 | 35 | <div class="inner">Goodbye</div> |
36 | 36 | <p>Test</p> |
37 | | -</div></pre> |
| 37 | +</div></code></pre> |
38 | 38 | <p>An element in the DOM can also be selected and inserted after another element:</p> |
39 | | - <pre>$('.container').after($('h2'));</pre> |
| 39 | + <pre><code>$('.container').after($('h2'));</code></pre> |
40 | 40 | <p>If an element selected this way is inserted elsewhere, it will be moved rather than cloned:</p> |
41 | | - <pre><div class="container"> |
| 41 | + <pre><code><div class="container"> |
42 | 42 | <div class="inner">Hello</div> |
43 | 43 | <div class="inner">Goodbye</div> |
44 | 44 | </div> |
45 | | -<h2>Greetings</h2></pre> |
| 45 | +<h2>Greetings</h2></code></pre> |
46 | 46 | <p>If there is more than one target element, however, cloned copies of the inserted element will be created for each target after the first.</p> |
47 | 47 | <h4 id="disconnected-dom-nodes">Inserting Disconnected DOM nodes</h4> |
48 | 48 | <p>As of jQuery 1.4, <code>.before()</code> and <code>.after()</code> will also work on disconnected DOM nodes. For example, given the following code:</p> |
49 | | - <pre>$('<div/>').after('<p></p>');</pre> |
| 49 | + <pre><code>$('<div/>').after('<p></p>');</code></pre> |
50 | 50 | <p>The result is a jQuery set containing a div and a paragraph, in that order. That set can be further manipulated, even before it is inserted in the document.</p> |
51 | | - <pre>$('<div/>').after('<p></p>').addClass('foo') |
| 51 | + <pre><code>$('<div/>').after('<p></p>').addClass('foo') |
52 | 52 | .filter('p').attr('id', 'bar').html('hello') |
53 | 53 | .end() |
54 | | -.appendTo('body');</pre> |
| 54 | +.appendTo('body');</code></pre> |
55 | 55 | <p>This results in the following elements inserted just before the closing <code></body></code> tag:</p> |
56 | | - <pre> |
| 56 | + <pre><code> |
57 | 57 | <div class="foo"></div> |
58 | 58 | <p class="foo" id="bar">hello</p> |
59 | | -</pre> |
| 59 | +</code></pre> |
60 | 60 | <h4 id="passing-a-function">Passing a Function</h4> |
61 | 61 | <p>As of jQuery 1.4, <code>.after()</code> supports passing a function that returns the elements to insert.</p> |
62 | | - <pre>$('p').after(function() { |
| 62 | + <pre><code>$('p').after(function() { |
63 | 63 | return '<div>' + this.className + '</div>'; |
64 | | -});</pre> |
| 64 | +});</code></pre> |
65 | 65 | <p>This example inserts a <code><div></code> after each paragraph, with each new <code><div></code> containing the class name(s) of its preceding paragraph.</p> |
66 | 66 | <h4 id="additional-arguments">Additional Arguments</h4> |
67 | 67 | <p>Similar to other content-adding methods such as <code><a href="http://api.jquery.com/prepend/">.prepend()</a></code> and <code><a href="http://api.jquery.com/before/">.before()</a></code>, <code>.after()</code> also supports passing in multiple arguments as input. Supported input includes DOM elements, jQuery objects, HTML strings, and arrays of DOM elements.</p> |
68 | 68 | <p>For example, the following will insert two new <code><div></code>s and an existing <code><div></code> after the first paragraph:</p> |
69 | | - <pre>var $newdiv1 = $('<div id="object1"/>'), |
| 69 | + <pre><code>var $newdiv1 = $('<div id="object1"/>'), |
70 | 70 | newdiv2 = document.createElement('div'), |
71 | 71 | existingdiv1 = document.getElementById('foo'); |
72 | 72 |
|
73 | 73 | $('p').first().after($newdiv1, [newdiv2, existingdiv1]); |
74 | | -</pre> |
| 74 | +</code></pre> |
75 | 75 | <p>Since <code>.after()</code> can accept any number of additional arguments, the same result can be achieved by passing in the three <code><div></code>s as three separate arguments, like so: <code>$('p').first().after($newdiv1, newdiv2, existingdiv1)</code>. The type and number of arguments will largely depend on the elements that are collected in the code.</p> |
76 | 76 | </longdesc> |
77 | 77 | <example> |
|
0 commit comments