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
3
votes
4 answers

JavaScript: Copy Node to DocumentFragment

I gather that the whole point of a DocumentFragment is to be able to construct the contents without touching the DOM until it’s ready to go. Given that DocumentFragment doesn’t support innerHTML, it can be a bit tedious. On the other hand, once…
Manngo
  • 14,066
  • 10
  • 88
  • 110
3
votes
1 answer

Check if DocumentFragment is a normal Node

I've believed that my problem is pretty simple but after spending some time searching I cannot find a satisfactory solution. I have a DocumentFragment element and I want to check if it's wrapped entirely by some html tag. Here is pseudo code which…
ghi
  • 697
  • 2
  • 9
  • 20
3
votes
1 answer

Why isn't my appendChild working with createDocumentFragment?

I am trying to append newly created elements to a div, then append the div to a document fragment, but it isn't working as expected. Please help me identify what I am missing. //array of values to look up let channels = ["channel1", "channel2",…
maxwelldem
  • 55
  • 5
3
votes
1 answer

Document fragment VS created un-appended div

Is there a difference between using a document fragment or an un-appended created div to avoid multiple hits to the DOM? Let's say we're going to generate 100 list items... Our page's contents:
    Scenario 1: document…
    The Qodesmith
    • 3,205
    • 4
    • 32
    • 45
    3
    votes
    2 answers

    jsoup equivalent of DOM Range operations like extractContents() etc

    I'm trying to do extracting and replacing equivalents of JavaScript DocumentFragments through jsoup DOM model. Does anyone have some ready to use code to emulate DOM Range selection and operations on it? I would like to select a range of text, which…
    gregko
    • 5,642
    • 9
    • 49
    • 76
    3
    votes
    0 answers

    DocumentFragment vs $('

    Is creating a DocumentFragment, the same as creating a $('
    ')? E.g.: var fragment = $(document.createDocumentFragment()); vs var detached = $('
    '); I'm unsure about the advantages of using a DocumentFragment like that when detached…
    Akshay Rawat
    • 4,714
    • 5
    • 40
    • 65
    3
    votes
    0 answers

    Rendering HTML (and CSS) offscreen for advanced templates

    I'm building a Javascript-based client side templating engine for an internal app. It loads HTML/CSS-based templates from the server and combines them with HTML-based contant (P, EM, etc.) The templates basically have fixed size areas (defined via…
    Michael
    • 1,742
    • 3
    • 18
    • 24
    2
    votes
    1 answer

    Can’t access DOM elements created by `createDocumentFragment`

    In my tutorial project, I fill the page with elements created using DocumentFragment. Everything happens as it should: the elements are created, drawn on the page, and displayed in the DOM. The problem is that when I try to access these elements for…
    Mikita
    • 29
    • 2
    2
    votes
    0 answers

    use .appendChild(DocumentFragment) vs .append(...[DomElement,...])

    The MDN docs say: Because all of the nodes are inserted into the document at once, only one reflow and render is triggered instead of potentially one for each node inserted if they were inserted separately. So const el1 =…
    8HoLoN
    • 1,122
    • 5
    • 14
    2
    votes
    1 answer

    Display a DocumentFragment in Vue

    I am using a library (prosemirror) that gives me a DocumentFragment out of json I get from the database. Now I want to display it in my component. How? Two hours of googling gave me nothing. resolveContent: function () { let contentNode =…
    Rince
    • 2,195
    • 3
    • 21
    • 35
    2
    votes
    0 answers

    Creating / wrapping DocumentFragment in MooTools JavaScript library

    How to do equivalent of the following pure JavaScript fragment with MooTools x = document.createDocumentFragment(); x.[fill with nodes]; document.[somewhere].appendChild(x); In particular as described in DOM 2 Core after attaching fragment to DOM…
    Jakub Narębski
    • 309,089
    • 65
    • 217
    • 230
    2
    votes
    3 answers

    documentFragment converting to JSON format

    Can you please help me to convert documentFragment object to JSON format? I need it to send documentFragment in message to iframe. This is my code: var range = window.getSelection().getRangeAt(0); var fragment = range.cloneContents(); …
    Мария Ольховая
    • 103
    • 1
    • 1
    • 7
    2
    votes
    1 answer

    appendChild() strips content from imported template

    I obtain an active copy of an HTML5