From ba9e5fbc695d24f666626733722be08102329897 Mon Sep 17 00:00:00 2001 From: Mike Pennisi Date: Mon, 27 Jan 2014 14:29:34 -0500 Subject: [PATCH] Correct description of insertion cloning behavior When an element is to be inserted in multiple locations in the DOM, all four of these manipulation methods behave in the same way: they insert a clone for all but the *last* matched location. From jQuery's implementation of the internal `domManip` method [1]: > Use the original fragment for the last item instead of the first > because it can end up being emptied incorrectly in certain situations > (#8070). [1] https://github.com/jquery/jquery/blob/988d99ad278c2c9dc16c68f86bddc4df99dcd928/src/manipulation.js#L506-L522 --- entries/after.xml | 2 +- entries/append.xml | 2 +- entries/before.xml | 2 +- entries/prepend.xml | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/entries/after.xml b/entries/after.xml index 8c0fe2c3..38b44162 100644 --- a/entries/after.xml +++ b/entries/after.xml @@ -60,7 +60,7 @@ $( ".container" ).after( $( "h2" ) ); </div> <h2>Greetings</h2> -

If there is more than one target element, however, cloned copies of the inserted element will be created for each target after the first.

+

Important: If there is more than one target element, however, cloned copies of the inserted element will be created for each target except for the last one.

Inserting Disconnected DOM nodes

As of jQuery 1.4, .before() and .after() will also work on disconnected DOM nodes. For example, given the following code:

$( "<div></div>" ).after( "<p></p>" );
diff --git a/entries/append.xml b/entries/append.xml index d8b4ebb9..5903fa05 100644 --- a/entries/append.xml +++ b/entries/append.xml @@ -66,7 +66,7 @@ $( ".container" ).append( $( "h2" ) ); <h2>Greetings</h2> </div> -

If there is more than one target element, however, cloned copies of the inserted element will be created for each target except for the last one.

+

Important: If there is more than one target element, however, cloned copies of the inserted element will be created for each target except for the last one.

Additional Arguments

Similar to other content-adding methods such as .prepend() and .before(), .append() also supports passing in multiple arguments as input. Supported input includes DOM elements, jQuery objects, HTML strings, and arrays of DOM elements.

For example, the following will insert two new <div>s and an existing <div> as the last three child nodes of the body:

diff --git a/entries/before.xml b/entries/before.xml index 13bfce2c..060897cc 100644 --- a/entries/before.xml +++ b/entries/before.xml @@ -62,7 +62,7 @@ $( ".container" ).before( $( "h2" ) ); <div class="inner">Goodbye</div> </div> -

If there is more than one target element, however, cloned copies of the inserted element will be created for each target after the first.

+

Important: If there is more than one target element, however, cloned copies of the inserted element will be created for each target except for the last one.

In jQuery 1.4, .before() and .after() will also work on disconnected DOM nodes:


 $( "<div>" ).before( "<p></p>" );
diff --git a/entries/prepend.xml b/entries/prepend.xml
index df99494c..ca783d51 100644
--- a/entries/prepend.xml
+++ b/entries/prepend.xml
@@ -66,7 +66,7 @@ $( ".container" ).prepend( $( "h2" ) );
     <div class="inner">Goodbye</div>
 </div>
-

Important: If there is more than one target element, however, cloned copies of the inserted element will be created for each target after the first.

+

Important: If there is more than one target element, however, cloned copies of the inserted element will be created for each target except for the last one.

Additional Arguments

Similar to other content-adding methods such as .append() and .before(), .prepend() also supports passing in multiple arguments as input. Supported input includes DOM elements, jQuery objects, HTML strings, and arrays of DOM elements.

For example, the following will insert two new <div>s and an existing <div> as the first three child nodes of the body: