Created
April 15, 2012 07:55
-
-
Save markelog/2390810 to your computer and use it in GitHub Desktop.
#8894 fix explanation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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