Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
#8894 fix explanation
var fragment, div, clonedNode, firstP, secondP, clonedP, dbi, clonedBdi,
node = document.createElement("div");
// true in all browsers
console.log( node.parentNode == null );
// but after
node.getElementsByTagName();
// true only in ie < 9
console.log( node.parentNode != null && node.parentNode.nodeType === 11 );
// different example –
node = document.createElement("div");
fragment = document.createDocumentFragment();
fragment.appendChild( node );
// true in all browsers
console.log( node.parentNode != null );
console.log( node.parentNode.nodeType === 11 );
// but after
clonedNode = node.cloneNode( true );
// true only in ie < 9
console.log( clonedNode.parentNode != null );
console.log( clonedNode.parentNode && clonedNode.parentNode.nodeType === 11 );
// true in all browsers
console.log( $( "<div />" ).get( 0 ).parentNode == null );
// true only in ie < 9
console.log( $( "<div />" ).clone().get( 0 ).parentNode != null );
// depending on how many elements (one, or more than one) in inserted collection and
// what type is parentNode of the element, appendTo and alike methods will use different code path,
// without jQuery.fn.pushStack, in first case and with jQuery.fn.pushStack, in second
firstP = $("<p/>"); // created without fragments – parentNode == null
secondP = $("<p>test</p>"); // created with fragments – parentNode.nodeType === 11
console.log( firstP.appendTo("<div/>").end().length ); // 1
console.log( secondP.appendTo("<div/>").end().length ); // 0
// bad behavior, but consistent in all browsers
// but now amount of inserted nodes is two, so second code path will be chosen in both cases
console.log( firstP.appendTo("<div/><div/>").end().length ); // 1
console.log( secondP.appendTo("<div/><div/>").end().length ); // 1
// but if
clonedP = secondP.clone();
// true – in "normal" browsers, and false – in ie < 9
console.log( clonedP.get( 0 ).parentNode == null );
// nodeType === 11 in ie < 9, null in all others
console.log( clonedP.get( 0 ).parentNode && clonedP.get( 0 ).parentNode.nodeType );
// a bit more complicated example
div = $("<div></div>");
// true in all browser
console.log( div.get( 0 ).parentNode == null );
div.find("p");
// now false in ie < 9
console.log( div.get( 0 ).parentNode == null );
// so this is why this will be true in ie < 9 and false in all other browsers
console.log( clonedP.addClass("test").appendTo("<div/>").end().hasClass("test") === false );
console.log( $("<div/>").find("p").end().addClass("test").appendTo("<div/>").end().hasClass("test") === false );
console.log( $("<div/>").text("test").addClass("test").appendTo("<div/>").end().hasClass("test") === false );
// in "normal" browsers parentNode after jQuery.clone or jQuery.fn.find or jQuery.fn.text, will be null,
// so second path will apply, in ie < 9 parentNode will be documentFragment, so first code path will apply
// and there is a html5 elements...
bdi = $( "<bdi />" );
// true in all browsers
console.log( bdi[ 0 ].parentNode == null );
clonedBdi = bdi.clone();
// null in all browsers and nodeType === 1, in ie < 9
console.log( clonedBdi.append("test").get(0).parentNode && clonedBdi.append("test").get(0).parentNode.nodeType );
// because of it, this statement will be false
console.log( clonedBdi.addClass("test").appendTo("<div/>").end().hasClass("test") === false );
// code path should be the same for elements –
// 1. created with fragments
// 2. created with disconnected nodes
// 3. created without fragments or disconnected nodes
// 4. created with fragments or with disconnected nodes and manipulated after
// appendTo and alike methods called on disconnected nodes
// should follow the first path, regardless of type of parentNode
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.