1. Fragment Sentence
2. Fragment Sentence Checker
3. Fragment Grammar Example

Fragments, like you just read, are simply pieces of files that aren't placed next to each other on the drive. That might be kind of strange to think about, and nothing you would ever notice, but it's true. For example, when you create a new Microsoft Word file, you see the whole file in one place, like on the Desktop or in your Documents folder.

1. A fragment occurs whenever you do these three things: You begin a group of words with a capital letter. You conclude this group of words with an end mark—either a period (.).
2. Definition of fragment (Entry 1 of 2): a part broken off, detached, or incomplete The dish lay in fragments on the floor.
3. A fragment will often be a subordinate clause, participle phrase, infinitive phrase, afterthought, lonely verb, or appositive. Each type of fragment has a marker that identifies it. Subordinate Clause Fragments.

The DocumentFragment interface represents a minimal document object that has no parent. It is used as a lightweight version of Document that stores a segment of a document structure comprised of nodes just like a standard document. The key difference is due to the fact that the document fragment isn't part of the active document tree structure. Changes made to the fragment don't affect the document (even on reflow) or incur any performance impact when changes are made.

Constructor

Properties

This interface has no specific properties, but inherits those of its parent, Node, and implements those of the ParentNode interface.

DocumentFragment.childElementCountRead only

Returns the amount of child elements the DocumentFragment has.

DocumentFragment.childrenRead only

Returns a live HTMLCollection containing all objects of type Element that are children of the DocumentFragment object.

DocumentFragment.firstElementChildRead only

Returns the Element that is the first child of the DocumentFragment object, or null if there is none.

DocumentFragment.lastElementChildRead only

Returns the Element that is the last child of the DocumentFragment object, or null if there is none.

Methods

This interface inherits the methods of its parent, Node, and implements those of the ParentNode interface.

DocumentFragment.append()

Inserts a set of Node objects or DOMString objects after the last child of the document fragment.

DocumentFragment.prepend()

Inserts a set of Node objects or DOMString objects before the first child of the document fragment.

DocumentFragment.querySelector()

Returns the first Element node within the DocumentFragment, in document order, that matches the specified selectors.

DocumentFragment.querySelectorAll()

Returns a NodeList of all the Element nodes within the DocumentFragment that match the specified selectors.

DocumentFragment.getElementById()

Returns the first Element node within the DocumentFragment, in document order, that matches the specified ID. Functionally equivalent to Document.getElementById().

Usage notes

A common use for DocumentFragment is to create one, assemble a DOM subtree within it, then append or insert the fragment into the DOM using Node interface methods such as appendChild() or insertBefore(). Doing this moves the fragment's nodes into the DOM, leaving behind an empty DocumentFragment. 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.

This interface is also of great use with Web components: <template> elements contain a DocumentFragment in their HTMLTemplateElement.content property.

An empty DocumentFragment can be created using the document.createDocumentFragment() method or the constructor.

Example

HTML

Fragment Sentence

JavaScript

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

The DocumentFragment interface represents a minimal document object that has no parent. It is used as a lightweight version of Document that stores a segment of a document structure comprised of nodes just like a standard document. The key difference is due to the fact that the document fragment isn't part of the active document tree structure. Changes made to the fragment don't affect the document (even on reflow) or incur any performance impact when changes are made.

Constructor

Properties

This interface has no specific properties, but inherits those of its parent, Node, and implements those of the ParentNode interface.

DocumentFragment.childElementCountRead only

Returns the amount of child elements the DocumentFragment has.

DocumentFragment.childrenRead only

Returns a live HTMLCollection containing all objects of type Element that are children of the DocumentFragment object.

DocumentFragment.firstElementChildRead only

Returns the Element that is the first child of the DocumentFragment object, or null if there is none.

DocumentFragment.lastElementChildRead only

Returns the Element that is the last child of the DocumentFragment object, or null if there is none.

Methods

This interface inherits the methods of its parent, Node, and implements those of the ParentNode interface.

DocumentFragment.append()

Inserts a set of Node objects or DOMString objects after the last child of the document fragment.

DocumentFragment.prepend()

Inserts a set of Node objects or DOMString objects before the first child of the document fragment.

DocumentFragment.querySelector()

Returns the first Element node within the DocumentFragment, in document order, that matches the specified selectors.

DocumentFragment.querySelectorAll()

Returns a NodeList of all the Element nodes within the DocumentFragment that match the specified selectors.

DocumentFragment.getElementById()

Returns the first Element node within the DocumentFragment, in document order, that matches the specified ID. Functionally equivalent to Document.getElementById().

Usage notes

A common use for DocumentFragment is to create one, assemble a DOM subtree within it, then append or insert the fragment into the DOM using Node interface methods such as appendChild() or insertBefore(). Doing this moves the fragment's nodes into the DOM, leaving behind an empty DocumentFragment. 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.

This interface is also of great use with Web components: <template> elements contain a DocumentFragment in their HTMLTemplateElement.content property.

An empty DocumentFragment can be created using the document.createDocumentFragment() method or the constructor.

Example

HTML

JavaScript

Result

Specifications

Browser compatibility

BCD tables only load in the browser

Fragment Sentence Checker

Fragment Grammar Example

See also