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

make a DOM element's content be the one of a document fragment

I am trying to insert into a DOM element the content of a document fragment (in pure javascript). The working principle is this: var a = document.getElementById("a"), b = document.getElementById("b"); now i place the content of "a" into a…
Giuppox
  • 1,393
  • 9
  • 35
0
votes
0 answers

working with createDocumentFragment() without ids

I'm trying to build the following using createDocumentFragment() and append it to document.body. My usual approach would be to reference an element by it's id. Since there are no 'ids here, how do I build something like this?
Norman
  • 6,159
  • 23
  • 88
  • 141
0
votes
1 answer

How to only append a certain part of a DOMParser result to a DocumentFragment element

I'm trying to append the html result of a DOMParser to a DocumentFragment which I then append to the body (after some load event). Appending the whole DOMParser result works, however appending only the body part of the result…
user1431398
0
votes
3 answers

get attributes from document fragment?

I want to access the data-index attribute in javascript but when I type taskElement.dataset.index I am getting an error How can I access the attributes that in the template element? const tasksContainer =…
Goold eng
  • 21
  • 1
  • 1
  • 2
0
votes
1 answer

Creating multiple elements using javascript with some element in created element

I'm trying to use javascript to create a set of elements over and over again once the user enters a text where it would display the text with a button with an image in it to the side of it but I could not find a way to do it efficiently. The…
tngrj
  • 141
  • 3
  • 14
0
votes
0 answers

Appending elements to DOM inside setTimeout function not working - createDocumentFragment & appendChild

I am tying to dynamically append divs to a DOM element using pure javascript. When I am using it without the setTimeout function it works properly, but when I am using setTimeout function the document fragment isn't appended (I can see it exists if…
Eken
  • 103
  • 1
  • 1
  • 10
0
votes
0 answers

using document.elementFromPoint on documentFragment

When applying document.elementFromPoint on point(x,y) which points to an element somewhere inside a documentFragment, it returns the container element. For example:
something…
Nizar
  • 481
  • 5
  • 8
0
votes
5 answers

Can I convert an HTML comment to actual HTML using JavaScript?

If I insert a comment node into a document fragment, can I convert it to HTML later? Example: var fragment = document.createDocumentFragment(); var comment = document.createComment('
Testing
'); fragment.appendChild(comment); // Convert…
KevBot
  • 17,900
  • 5
  • 50
  • 68
0
votes
0 answers

Check if browser support DocumentFragment

I'm using DocumentFragment to append some child nodes into list, but I'm facing nonsupporting problems in some browsers. So I wanted to know is there another way of checking that besides the method of checking if browser is in the list of supported…
Mr. Nobody
  • 340
  • 3
  • 17
0
votes
1 answer

documentFragement

please take a look at the following code. var oFra = document.createDocumentFragment(); var myDiv = document.createElement("div"); myDiv.id="myId"; oFra.appendChild(myDiv); oFra.getElementById("myId"); In this case do i have ref…
0
votes
1 answer

Does jquery clone() user documentfragment internally?

I am inserting elements into dom dynamically and for that i m using following steps :(jquery) The initial dom structure is as below:
clone the parent div using jquery .clone() clone the…
ams
  • 91
  • 7
0
votes
2 answers

How to remove preloader once window/ document is ready

I have a css preloader that I want to show while the page loads. This is visible. however I want to remove this after the page has loaded/ once the window / document is ready. This is the part I'm having a hard time with. I am getting the following…
Enrique
  • 11
  • 1
0
votes
1 answer

Randomly shuffle existing Document Fragment before appending to DOM with JavaScript

I have a dynamically generated text area and button via javascript. I have it working so that when a value is entered into the text area, and then the button is clicked, a random amount of SPAN tags will be created. For each character of the value…
DaneTheory
  • 282
  • 3
  • 16
0
votes
1 answer

In this situation, is there any advantage of using fragments over html strings?

I'm coding a chat application, and it's gotten a bit more complex, since I want it to have features such as delivery confirmation, message caching and so on. Right now, the way I'm handling message caching is: User clicks conversation First batch…
J. Doe
  • 3
  • 2
0
votes
2 answers

Javascript - get number of elements in Document Fragment

I'm creating a counter by passing a number to following function: function numberToHtml(n) { function createSpan(n) { var span = document.createElement('span'); span.textContent = n; return…
user1049961
  • 2,656
  • 9
  • 37
  • 69