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
2
votes
1 answer

documentFragment.cloneNode(true) doesn't clone jQuery data

I have a documentFragment with several child nodes containing some .data() added like so: myDocumentFragment = document.createDocumentFragment(); for(...) { myDocumentFragment.appendChild( $('').addClass('button') .attr('href',…
taber
  • 3,166
  • 4
  • 46
  • 72
2
votes
0 answers

DOM - appendChild/removeChild to array of elements or re-render with DocumentFragment?

I have an array of items that I need to render into the DOM, for example: [ {id: 1, nextId: 2}, {id: 2, nextId: 3, prevId: 1}, {id: 3, nextId: 4, prevId: 2}, {id: 4, nextId: 5, prevId: 3}, {id: 5, prevId: 4}, ] When adding or removing…
Kosmetika
  • 20,774
  • 37
  • 108
  • 172
2
votes
0 answers

jQuery Ajax Call - Getting the First Child Element of the Body Tag

This is an interesting question and I want to hear all of your opinions on it. A jQuery ajax call strips out the following tags: , , etc. You are unable to access them through the data. For example: $.ajax({ async:…
Paddy
  • 1,175
  • 1
  • 14
  • 23
2
votes
1 answer

XmlDocumentFragment equivalent in LINQ to XML?

I am unable to find something like XDocumentFragment. Is there an equivalent of XmlDocumentFragment in LINQ to XML? I know that I can keep nodes in a collection. But how to conveniently serialize a bunch of various nodes to string, like this: new…
TN.
  • 18,874
  • 30
  • 99
  • 157
2
votes
2 answers

Using createDocumentFragment to replace an existing column in a table

I've read that createDocumentFragment is way more faster than appending elements one by one to the DOM in a for-loop, e.g. see here. What I want to do: Create a table column in a document fragment. This column should contain numbers from an array…
OhDaeSu
  • 515
  • 1
  • 7
  • 21
2
votes
1 answer

Loading JS File - Directly into Document vs DocumentFragment

I was wondering what benefits or differences there were in these two different methods of AJAX external file loading Example 1 - Loads file into document directly (function () { var s = document.createElement('script'); s.type =…
RenaissanceProgrammer
  • 404
  • 1
  • 11
  • 30
2
votes
1 answer

Minimal JavaScript wysiwyg - remove tag from selected text if already exists

I am making a minimal JavaScript WYSIWYG control. I don't want to use document.execCommand because it doesn't allow arbitrary HTML, it's inconsistent across browsers etc. Here is what I have so far stripped down to minimum working…
nrkn
  • 1,752
  • 3
  • 15
  • 24
2
votes
2 answers

How to choose xpath return type?

I have the xpath query:
JD.
  • 2,361
  • 6
  • 25
  • 38
2
votes
1 answer

Certain elements not allowed in DocumentFragment?

I would like to use DocumentFragment and querySelector to make and modify DocumentFragments. I am using some code from Inserting arbitrary HTML into a DocumentFragment to create the fragments from HTML strings: stringToDocumentFragment =…
mikemaccana
  • 110,530
  • 99
  • 389
  • 494
1
vote
2 answers

How to get the DOM reference to an inserted document fragment

I am attempting to get the DOM reference of an inserted document fragment in vanilla Javascript. I'm currently using Node.appendChild() however the returned reference is the document fragment as outlined here:…
CameronB
  • 93
  • 1
  • 5
1
vote
1 answer

How to divide a DocumentFragment based on character offset

I have a string that (potentially) contains HTML tags. I want to split it into smaller valid HTML strings based on (text) character length. The use case is essentially pagination. I know the length of text that can fit on a single page. So I want to…
emersonthis
  • 32,822
  • 59
  • 210
  • 375
1
vote
1 answer

How to log changes to DocumentFragment?

When I run the following code in the browser - const frag = new DocumentFragment(); const ul = document.createElement('ul'); frag.appendChild(ul); Object.entries(['a', 'b', 'c']).forEach(([key, value]) => { const li =…
user2309803
  • 541
  • 5
  • 15
1
vote
0 answers

How to manipulate DocumentFragment in react?

I am working on an ePub app, currently I want to display a note/highlight section on a sidebar. I am able to get the Range object (by the document.crateRange method), then call cloneContents from it which it return a DocumentFragment object. I had…
Jiahua Zhang
  • 511
  • 7
  • 19
1
vote
1 answer

Function property holding a reference to a document fragment: when to use cloneNode?

I'm having trouble understanding when a data assignment to an object is a reference and when a copy of the object is created. I thought I understood but the following example doesn't fit my simple undestanding of it. An event handler starts off a…
Gary
  • 2,393
  • 12
  • 31
1
vote
1 answer

Create document-fragment that stays in DOM

Recently I saw following html DOM: Please see the console output that queries the element display-1 and tells me that it's parentNode is a document-fragment. How can this happen? I read trough several articles and everyone stated that after…
Josef Biehler
  • 952
  • 4
  • 16