Fix #13596; #13722: .replaceWith consistency. Close gh-1216.

src/manipulation.js

@@ -38,31 +38,33 @@ jQuery.fn.extend({
 	},
 
 	append: function() {
-		return this.domManip(arguments, true, function( elem ) {
+		return this.domManip( arguments, function( elem ) {
 			if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
-				this.appendChild( elem );
+				var target = manipulationTarget( this, elem );
+				target.appendChild( elem );
 			}
 		});
 	},
 
 	prepend: function() {
-		return this.domManip(arguments, true, function( elem ) {
+		return this.domManip( arguments, function( elem ) {
 			if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
-				this.insertBefore( elem, this.firstChild );
+				var target = manipulationTarget( this, elem );
+				target.insertBefore( elem, target.firstChild );
 			}
 		});
 	},
 
 	before: function() {
-		return this.domManip(arguments, false, function( elem ) {
+		return this.domManip( arguments, function( elem ) {
 			if ( this.parentNode ) {
 				this.parentNode.insertBefore( elem, this );
 			}
 		});
 	},
 
 	after: function() {
-		return this.domManip(arguments, false, function( elem ) {
+		return this.domManip( arguments, function( elem ) {
 			if ( this.parentNode ) {
 				this.parentNode.insertBefore( elem, this.nextSibling );
 			}
@@ -162,33 +164,35 @@ jQuery.fn.extend({
 		}, null, value, arguments.length );
 	},
 
-	replaceWith: function( value ) {
-		var isFunction = jQuery.isFunction( value );
+	replaceWith: function() {
+		var
+			// Snapshot the DOM in case .domManip sweeps something relevant into its fragment
+			args = jQuery.map( this, function( elem ) {
+				return [ elem.nextSibling, elem.parentNode ];
+			}),
+			i = 0;
 
-		// Make sure that the elements are removed from the DOM before they are inserted
-		// this can help fix replacing a parent with child elements
-		if ( !isFunction && typeof value !== "string" ) {
-			value = jQuery( value ).not( this ).detach();
-		}
+		// Make the changes, replacing each context element with the new content
+		this.domManip( arguments, function( elem ) {
+			var next = args[ i++ ],
+				parent = args[ i++ ];
 
-		return value !== "" ?
-			this.domManip( [ value ], true, function( elem ) {
-				var next = this.nextSibling,
-					parent = this.parentNode;
+			if ( parent ) {
+				jQuery( this ).remove();
+				parent.insertBefore( elem, next );
+			}
+		// Allow new content to include elements from the context set
+		}, true );
 
-				if ( parent ) {
-					jQuery( this ).remove();
-					parent.insertBefore( elem, next );
-				}
-			}) :
-			this.remove();
+		// Force removal if there was no new content (e.g., from empty arguments)
+		return i ? this : this.remove();
 	},
 
 	detach: function( selector ) {
 		return this.remove( selector, true );
 	},
 
-	domManip: function( args, table, callback ) {
+	domManip: function( args, callback, allowIntersection ) {
 
 		// Flatten any nested arrays
 		args = core_concat.apply( [], args );
@@ -206,22 +210,21 @@ jQuery.fn.extend({
 			return this.each(function( index ) {
 				var self = set.eq( index );
 				if ( isFunction ) {
-					args[ 0 ] = value.call( this, index, table ? self.html() : undefined );
+					args[ 0 ] = value.call( this, index, self.html() );
 				}
-				self.domManip( args, table, callback );
+				self.domManip( args, callback, allowIntersection );
 			});
 		}
 
 		if ( l ) {
-			fragment = jQuery.buildFragment( args, this[ 0 ].ownerDocument, false, this );
+			fragment = jQuery.buildFragment( args, this[ 0 ].ownerDocument, false, !allowIntersection && this );
 			first = fragment.firstChild;
 
 			if ( fragment.childNodes.length === 1 ) {
 				fragment = first;
 			}
 
 			if ( first ) {
-				table = table && jQuery.nodeName( first, "tr" );
 				scripts = jQuery.map( getAll( fragment, "script" ), disableScript );
 				hasScripts = scripts.length;
 
@@ -241,13 +244,7 @@ jQuery.fn.extend({
 						}
 					}
 
-					callback.call(
-						table && jQuery.nodeName( this[ i ], "table" ) ?
-							findOrAppend( this[ i ], "tbody" ) :
-							this[ i ],
-						node,
-						i
-					);
+					callback.call( this[ i ], node, i );
 				}
 
 				if ( hasScripts ) {
@@ -476,8 +473,15 @@ jQuery.extend({
 	}
 });
 
-function findOrAppend( elem, tag ) {
-	return elem.getElementsByTagName( tag )[ 0 ] || elem.appendChild( elem.ownerDocument.createElement(tag) );
+// Support: 1.x compatibility
+// Manipulating tables requires a tbody
+function manipulationTarget( elem, content ) {
+	return jQuery.nodeName( elem, "table" ) &&
+		jQuery.nodeName( content.nodeType === 1 ? content : content.firstChild, "tr" ) ?
+
+		elem.getElementsByTagName("tbody")[0] ||
+			elem.appendChild( elem.ownerDocument.createElement("tbody") ) :
+		elem;
 }
 
 // Replace/restore the type attribute of script elements for safe DOM manipulation

test/.jshintignore

@@ -1,3 +1,3 @@
 qunit/
 data/badjson.js
-data/jquery-1.8.2.ajax_xhr.min.js
+data/jquery-1.9.1.ajax_xhr.min.js

test/index.html

@@ -9,7 +9,7 @@
 	<!-- Includes -->
 
 	<!-- Allows us to fetch submodule tests when using a no-ajax build -->
-	<script src="data/jquery-1.8.2.ajax_xhr.min.js"></script>
+	<script src="data/jquery-1.9.1.ajax_xhr.min.js"></script>
 
 	<script src="data/testinit.js"></script>
 

test/unit/manipulation.js

@@ -378,39 +378,33 @@ test( "append(Function) with incoming value", function() {
 	QUnit.reset();
 });
 
-test( "replaceWith on XML document (#9960)", function() {
+test( "XML DOM manipulation (#9960)", function() {
 
-	expect( 1 );
+	expect( 5 );
 
-	var newNode,
+	var
 		xmlDoc1 = jQuery.parseXML("<scxml xmlns='http://www.w3.org/2005/07/scxml' version='1.0'><state x='100' y='100' initial='actions' id='provisioning'></state><state x='100' y='100' id='error'></state><state x='100' y='100' id='finished' final='true'></state></scxml>"),
 		xmlDoc2 = jQuery.parseXML("<scxml xmlns='http://www.w3.org/2005/07/scxml' version='1.0'><state id='provisioning3'></state></scxml>"),
 		xml1 = jQuery( xmlDoc1 ),
 		xml2 = jQuery( xmlDoc2 ),
 		scxml1 = jQuery( "scxml", xml1 ),
-		scxml2 = jQuery( "scxml", xml2 );
+		scxml2 = jQuery( "scxml", xml2 ),
+		state = scxml2.find("state");
 
-	scxml1.replaceWith( scxml2 );
+	scxml1.append( state );
+	strictEqual( scxml1[0].lastChild, state[0], "append" );
 
-	newNode = jQuery( "scxml>state[id='provisioning3']", xml1 );
+	scxml1.prepend( state );
+	strictEqual( scxml1[0].firstChild, state[0], "prepend" );
 
-	equal( newNode.length, 1, "ReplaceWith not working on document nodes." );
-});
+	scxml1.find("#finished").after( state );
+	strictEqual( scxml1[0].lastChild, state[0], "after" );
 
-// #12449
-test( "replaceWith([]) where replacing element requires cloning", function () {
-	expect(2);
-	jQuery("#qunit-fixture").append(
-		"<div class='replaceable'></div><div class='replaceable'></div>"
-	);
-	// replacing set needs to be cloned so it can cover 3 replacements
-	jQuery("#qunit-fixture .replaceable").replaceWith(
-		jQuery("<span class='replaced'></span><span class='replaced'></span>")
-	);
-	equal( jQuery("#qunit-fixture").find(".replaceable").length, 0,
-		"Make sure replaced elements were removed" );
-	equal( jQuery("#qunit-fixture").find(".replaced").length, 4,
-		"Make sure replacing elements were cloned" );
+	scxml1.find("#provisioning").before( state );
+	strictEqual( scxml1[0].firstChild, state[0], "before" );
+
+	scxml2.replaceWith( scxml1 );
+	deepEqual( jQuery( "state", xml2 ).get(), scxml1.find("state").get(), "replaceWith" );
 });
 
 test( "append HTML5 sectioning elements (Bug #6485)", function() {
@@ -885,7 +879,7 @@ test( "insertAfter(String|Element|Array<Element>|jQuery)", function() {
 function testReplaceWith( val ) {
 
 	var tmp, y, child, child2, set, non_existent, $div,
-		expected = 23;
+		expected = 26;
 
 	expect( expected );
 
@@ -902,15 +896,22 @@ function testReplaceWith( val ) {
 	equal( jQuery("#bar").text(),"Baz", "Replace element with text" );
 	ok( !jQuery("#baz")[ 0 ], "Verify that original element is gone, after element" );
 
+	jQuery("#bar").replaceWith( "<div id='yahoo'></div>", "...", "<div id='baz'></div>" );
+	deepEqual( jQuery("#yahoo, #baz").get(), q( "yahoo", "baz" ),  "Replace element with multiple arguments (#13722)" );
+	strictEqual( jQuery("#yahoo")[0].nextSibling, jQuery("#baz")[0].previousSibling, "Argument order preserved" );
+	deepEqual( jQuery("#bar").get(), [], "Verify that original element is gone, after multiple arguments" );
+
 	jQuery("#google").replaceWith( val([ document.getElementById("first"), document.getElementById("mark") ]) );
-	ok( jQuery("#first")[ 0 ], "Replace element with array of elements" );
-	ok( jQuery("#mark")[ 0 ], "Replace element with array of elements" );
+	deepEqual( jQuery("#mark, #first").get(), q( "first", "mark" ),  "Replace element with array of elements" );
 	ok( !jQuery("#google")[ 0 ], "Verify that original element is gone, after array of elements" );
 
 	jQuery("#groups").replaceWith( val(jQuery("#mark, #first")) );
-	ok( jQuery("#first")[ 0 ], "Replace element with set of elements" );
-	ok( jQuery("#mark")[ 0 ], "Replace element with set of elements" );
-	ok( !jQuery("#groups")[ 0 ], "Verify that original element is gone, after set of elements" );
+	deepEqual( jQuery("#mark, #first").get(), q( "first", "mark" ),  "Replace element with jQuery collection" );
+	ok( !jQuery("#groups")[ 0 ], "Verify that original element is gone, after jQuery collection" );
+
+	jQuery("#mark, #first").replaceWith( val("<span class='replacement'></span><span class='replacement'></span>") );
+	equal( jQuery("#qunit-fixture .replacement").length, 4, "Replace multiple elements (#12449)" );
+	deepEqual( jQuery("#mark, #first").get(), [], "Verify that original elements are gone, after replace multiple" );
 
 	tmp = jQuery("<b>content</b>")[0];
 	jQuery("#anchor1").contents().replaceWith( val(tmp) );
@@ -997,13 +998,22 @@ test( "replaceWith(string) for more than one element", function() {
 	equal(jQuery("#foo p").length, 0, "verify that all the three original element have been replaced");
 });
 
-test( "replaceWith(\"\") (#13401)", 4, function() {
-	expect( 1 );
+test( "empty replaceWith (#13401; #13596)", 4, function() {
+	expect( 6 );
 
-	var div = jQuery("<div><p></p></div>");
+	var $el = jQuery("<div/>"),
+		tests = {
+			"empty string": "",
+			"empty array": [],
+			"empty collection": jQuery("#nonexistent")
+		};
 
-	div.children().replaceWith("");
-	equal( div.html().toLowerCase(), "", "Replacing with empty string removes element" );
+	jQuery.each( tests, function( label, input ) {
+		$el.html("<a/>").children().replaceWith( input );
+		strictEqual( $el.html(), "", "replaceWith(" + label + ")" );
+		$el.html("<b/>").children().replaceWith(function() { return input; });
+		strictEqual( $el.html(), "", "replaceWith(function returning " + label + ")" );
+	});
 });
 
 test( "replaceAll(String|Element|Array<Element>|jQuery)", function() {
@@ -1055,6 +1065,21 @@ test( "append to multiple elements (#8070)", function() {
 	equal( selects[ 1 ].childNodes.length, 2, "Second select got two nodes" );
 });
 
+test( "table manipulation", function() {
+	expect( 2 );
+
+	var table = jQuery("<table style='font-size:16px'></table>").appendTo("#qunit-fixture").empty(),
+		height = table[0].offsetHeight;
+
+	table.append("<tr><td>DATA</td></tr>");
+	ok( table[0].offsetHeight - height >= 15, "appended rows are visible" );
+
+	table.empty();
+	height = table[0].offsetHeight;
+	table.prepend("<tr><td>DATA</td></tr>");
+	ok( table[0].offsetHeight - height >= 15, "prepended rows are visible" );
+});
+
 test( "clone()", function() {
 
 	expect( 45 );