0

I am reading a code snippet in my application that goes like:

// Fragment Constructed
fragment = new Object();
fragment.document = document.createElement("div");
fragment.parentNode = node.parentNode; // Remembers the position to re-attach
fragment.nextSibling = node.nextSibling; // Remembers the position to re-attach
fragment.document.appendChild(node);

//Fragment Re-attached
if (fragment.nextSibling && fragment.nextSibling.nodeType !== 3) {
    while (fragment.document.firstChild) {
        fragment.parentNode.insertBefore(fragment.document.firstChild, fragment.nextNode);
    }
} else {
    while (fragment.document.firstChild) {
        fragment.parentNode.appendChild(fragment.document.firstChild);
    }
}

When the user clicks on a YUI Panel Hide button, we create an Object which has the following properties - parentNode, nextSibling of the panel box and a documentFragment object which gets appended with the panel container itself (i.e Fragment Contructed code above).

When the user unhides the YUI Panel, we re-attach it to the DOM. (i.e Frament Re-attached code above).

While I am still trying to figure how it works in real time covering all the different node possibilities, I had some questions about this code snippet.

  1. Would the fragment.document.firstChild be always 1 because I am appending a single node using fragment.document.appendChild(node)?
  2. If the nextSibling exists and it is a textnode this code goes to the else condition, but does it actually retain the correct meaning because we are now just appending to the parent without worrying about order correct? I guess this condition should be removed and it would work fine?
  3. What is the algorithmic complexity of while(fragment.document.firstChild)? Is it O(n) where n is the number of child nodes regardless of the child node it has - i.e child's child etc.
  4. Are there any advantages in doing this? I.e we are storing it elsewhere and bringing it back. Is there any advantage in doing so?

Related Question: Should I use document.createDocumentFragment or document.createElement

Community
  • 1
  • 1
Nishant
  • 20,354
  • 18
  • 69
  • 101
  • 1
    FYI: if you want to create a proper fragment, there's `document.createDocumentFragment`, right now you're creating a non-standard object where you're creating these properties yourself. – adeneo May 04 '16 at 18:54
  • This is a bit of legacy code. In IE this code uses `document.createDocumentFragment` but in other browsers this snippet is getting used. In either case text node is handled like this. I didn't understand why text node is any different than other nodes. – Nishant May 04 '16 at 18:55
  • 3
    A node is a node is a node and you can insert before or after any node. –  May 04 '16 at 18:58
  • Does that mean this handling is really not required and probably even incorrect? – Nishant May 04 '16 at 18:59
  • I agree that this code is not the standard way, but my question is do we need to **distinguish** text node like this? And doesn't this actually **change** the meaning of re-attach because now we are not concerned about order. Can anyone consolidate these and preferably answer below so that I can clear all the 4 doubts listed in the question. I hope this is not a stupid question! – Nishant May 04 '16 at 19:05
  • @adeneo: Will creating `document.createDocumentFragment` remove the need of remembering the location to re-attach to like we are doing here? I guess I need to need to know the `parentNode` and `nextSibling` to be correctly able to reposition it later on? This is a hide unhide scenario that is happening. Can you please clarify? – Nishant May 04 '16 at 19:33
  • I have no idea what you're doing? You're clearly creating a variable, with a `document` property, that is just an element you create, and then you add properties that are supposed to mimmick the native properties etc. It all seems very counterintuitive when you can just create a real documentFragment that has a real document, with the properties you'd expect to find etc. – adeneo May 04 '16 at 19:48
  • Just tried to explain the real scenario how we use fragments. I just couldn't think of another way to attach and re-attach using document fragments without using an object for storing meta data i.e original position etc. Most examples talk of attaching scenario. But attach and re-attach has some overheads right? If you still understand that is fine because I am a newbie to this :) – Nishant May 04 '16 at 20:01

0 Answers0