Stack Overflow
Stack Overflow

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
1
vote
4 answers

How to append multiple child elements in the DOM and display them, using vanilla javascript?

I am trying to insert some SVG icons in the dom but the SVG(parent node) is always being replaced by the use(child node). Anyone help me figure it out? Source code Image here Codepen here const icons = [ "html5" , "css3" , "javascript"…
Evan
  • 583
  • 1
  • 5
  • 11
1
vote
1 answer

documentFragment.querySelector problem with Safari

I am trying to retrieve an element inside a documentFragment using javascript querySelector method. I get what i expect with Chrome and Firefox, but not with Safari (Mac OS, Safari 12.0.2). function msg(s) { …
Simon Hi
  • 2,838
  • 1
  • 17
  • 17
1
vote
2 answers

In DocumentFragment: Failed to execute 'insertAdjacentHTML' on 'Element': The element has no parent

I am working inside of a DocumentFragment, and am attempting to insert HTML into it. We know that that a DocumentFragment does not have an innerHTML setter, so I attempted to insert a temporary node into the DocumentFragment and insert HTML after it…
KevBot
  • 17,900
  • 5
  • 50
  • 68
1
vote
1 answer

d3.html not working with d3.v4

In d3 version 3, I had this code, which worked great: d3.html("http://google.com",function(frag){ console.log(frag); }); That code doesn't work in version 4. So looking at the API and change log, I thought perhaps…
emma
  • 784
  • 2
  • 9
  • 23
1
vote
0 answers

Is there a performance difference between append SVG elements to Document Fragment and SVG GROUP

I read that it is sometimes a good idea to append DOM elements to a Document Fragment first in order to avoid reflow (https://developer.mozilla.org/de/docs/Web/API/Document/createDocumentFragment). Working with SVG I am wondering whether there is a…
Daniel
  • 3,383
  • 4
  • 30
  • 61
1
vote
1 answer

How do I create Variables in XSLT that are not document fragments?

Consider the following XSLT 2.0 template 1 2 3 var1 has
chiborg
  • 26,978
  • 14
  • 97
  • 115
1
vote
1 answer

Is manipulating documentFragment in webWorker legal in principle(multithreading)?

1.main_thread and work_thread don't share anything(share nothing in common) 2.constructing domFragment to some level of structure(base on data) all in main_thread is a little time consuming,and can be divide in to jobs for worker_thread. however ,…
Johnny
  • 387
  • 2
  • 12
1
vote
2 answers

How to append nested svg elements to dom with d3.js

I have looked around and it seems like this may not be possible but it would be amazing if you could use the selection capabilities of d3 to grab a whole chunk of svg markup and use it as the schema for a structure that you wanted to replicate…
Peter Segerstrom
  • 45
  • 7
0
votes
1 answer

How do I add CSS rules to a document fragment across IE/FF?

I am trying to create and then style a document fragment, but am having quite a bit of difficulty. Ironically, IE is not my problem! I have this: var newDom =…
encoder
  • 595
  • 6
  • 14
0
votes
1 answer

combining documentfragment and replacechild to minimize reflow

I'm making a javascript game without using canvas, and I want the screen to reflow only once per cycle, for speed. Is there a way for documentFragment to replace named elements? EDIT: The javascript guide suggests that replaceChild( ) can be used…
Chris Tolworthy
  • 2,066
  • 4
  • 20
  • 24
0
votes
2 answers

How to use jQuery selector/find() against text string without inserting into the DOM?

I have a text string i'm trying to select the spans from using jQuery. I'd like to grab the spans w/o adding the element to the dom -- if that's possible? After reading the jquery docs i was under the assumption that i could create a fragment by…
Mario Zigliotto
  • 8,315
  • 7
  • 52
  • 71
0
votes
2 answers

Is a React.Fragment the same as a DocumentFragment?

React.Fragment looks like DocumentFragment. But does React.Fragment has the same performance benefits like DocumentFragment? In other words, are this // index.jsx const arr = [...Array.from({length: 10000})]; return (
    <> …
EzioMercer
  • 1,502
  • 2
  • 7
  • 23
0
votes
0 answers

Is it possible to create nested elements in javascript using documentFragment?

I would like to create a reuseable html block using documentFragment. The idea is to create and fill a block of html code similar to below, for every object in an existing array. I'm not worried about filling the inner html yet, for now I just want…
Lucas
  • 13
  • 2
0
votes
1 answer

add comment and reply button to html body using javascript

I want to add html elements to the body of my page as an unordered list. I have used DocumentFragment method to create a fragment of the reply button and comment span. Now I need to add a textbox and a add reply to that ul whenever a user clicks on…
Mayank Sharma
  • 75
  • 12
0
votes
1 answer

Reorder elements layout according to array with elements id's

I need to perform the following task : There are two 'ul' elements containing some 'li' with unique id's.
1 2 3 4
5
6 7