Questions tagged [documentfragment]

a DocumentFragment is a lightweight container that can hold DOM nodes

DocumentFragment is a "lightweight" or "minimal" Document object. It is very common to want to be able to extract a portion of a document's tree or to create a new fragment of a document. Imagine implementing a user command like cut or rearranging a document by moving fragments around. It is desirable to have an object which can hold such fragments and it is quite natural to use a Node for this purpose. While it is true that a Document object could fulfil this role, a Document object can potentially be a heavyweight object, depending on the underlying implementation. What is really needed for this is a very lightweight object. DocumentFragment is such an object.

Syntax

An empty DocumentFragment can be created using the below syntax.

var docFragment = document.createDocumentFragment();

where,

docFragment is a reference to an empty DocumentFragment object.

References

  1. www.w3.org - Interface DocumentFragment
  2. Document Fragment - MDN Link
98 questions
72
votes
11 answers

Inserting arbitrary HTML into a DocumentFragment

I know that adding innerHTML to document fragments has been recently discussed, and will hopefully see inclusion in the DOM Standard. But, what is the workaround you're supposed to use in the meantime? That is, take var html =…
Domenic
  • 110,262
  • 41
  • 219
  • 271
45
votes
7 answers

Does using a document fragment really improve performance?

I've got a doubt regarding performance in JS. Say, I've got the next code: var divContainer = document.createElement("div"); divContainer.id="container"; var divHeader = document.createElement("div"); divHeader.id="header"; var divData =…
Sam Ccp
  • 1,102
  • 3
  • 12
  • 19
34
votes
6 answers

Converting Range or DocumentFragment to string

Is there a way to get the html string of a JavaScript Range Object in W3C compliant browsers? For example, let us say the user selects the following: Hello World It is possible to get "Hello World" as a string using the Range.toString()…
SamGoody
  • 13,758
  • 9
  • 81
  • 91
24
votes
8 answers

Is there any way to find an element in a documentFragment?

var oFra = document.createDocumentFragment(); // oFra.[add elements]; document.createElement("div").id="myId"; oFra.getElementById("myId"); //not in FF How can I get "myId" before attaching fragment to document?
pkario
  • 2,180
  • 6
  • 26
  • 30
20
votes
3 answers

Replace element contents with document fragment javascript

I'm trying to replace all contents of an element with a document fragment: var frag = document.createDocumentFragment() The document fragment is being created just fine. No problems there. I add elements to it just fine, no problems there either. I…
Randy Hall
  • 7,716
  • 16
  • 73
  • 151
18
votes
2 answers

how Document Fragment works?

Can anyone please explain briefly what documentFragment actually does? I have been searching for a clear explanation but I don't get any until now. what I read is, documentFragment is something like DOM like structure where we can add modify DOM…
Jeffrin John
  • 675
  • 2
  • 7
  • 16
14
votes
2 answers

Adding event listeners to elements cloned from the template tag

I am creating a lot of DOM elements (each has the same HTML structure) with the