A component of the document's structure is held using the DocumentFragment interface, which serves as a more streamlined version of the Document interface. Nevertheless, the existing DOM tree does not incorporate a DocumentFragment. Modifications made to the document fragment do not impact the performance overhead of the document.
The DocumentFragment's methods, such as appendChild and insertBefore, are commonly employed to create DOM nodes and subsequently add or insert these nodes into the current DOM structure.
To put it differently, creating a DocumentFragment within the DOM hierarchy and subsequently inserting or appending elements into the DOM through interface methods such as appendChild and append is the process. The elements of the fragment are moved into the DOM, resulting in an empty DocumentFragment being left in its wake.
Syntaxes
The subsequent syntax examples illustrate how to utilize the JavaScript DocumentFragment along with its associated interface.
Syntax 1
The functions associated with DocumentFragment are generally employed to create DOM nodes and subsequently add or insert them into the current DOM structure. To create a new document fragment, you would utilize the DocumentFragment constructor in the following manner:
let fragment_variable = new DocumentFragment();
Syntax2
The syntax below employs the createDocumentFragment method of the Document object to generate a new document fragment.
let fragment_variable = document.createDocumentFragment();
How it operates:
- Use the querySelector method to pick the list element by its id.
- Make a new document.
- Then, create a list item element, give the list item's innerHTML to the language, and append each newly created list item to the document fragment.
- This procedure is repeated for every component in the input array.
- Finally, add the text part to the list element.
Examples
The subsequent examples illustrate the functionality of the DocumentFragment method through various approaches.
Example 1:
The subsequent illustration demonstrates the functionality of the DocumentFragment method by utilizing fundamental techniques.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript DocumentFragment() Interface or Method </title>
</head>
<body>
<h3> JavaScript DocumentFragment() Interface or Method </h3>
<p> The appendChild() or insertBefore() methods of the DocumentFragment are typically used to build DOM nodes and add or insert them to the active DOM tree. </p>
<ul id = "language_data"></ul>
<script>
let languages_var = ['JavaScript', 'TypeScript', 'NodeJs', 'Jquery','AngularJs'];
let lang_data = document.querySelector('#language_data')
let fragment_variable = new DocumentFragment();
languages_var.forEach((language) => {
let li_var = document.createElement('li');
li_var.innerHTML = language;
fragment_variable.appendChild(li_var);
})
lang_data.appendChild(fragment_variable);
</script>
</body>
</html>
Output
The illustration displays the results generated through the DocumentFragment approach.
Example 2:
The subsequent illustration demonstrates the creation of an unordered list utilizing the DocumentFragment functionality.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript DocumentFragment() Interface or Method </title>
</head>
<body>
<h3> JavaScript DocumentFragment() Interface or Method </h3>
<p> The appendChild() or insertBefore() methods of the DocumentFragment are typically used to build DOM nodes and add or insert them to the active DOM tree. </p>
<ol id = "language_data"></ol>
<script>
let languages_var = ['JavaScript', 'TypeScript', 'NodeJs', 'Jquery','AngularJs'];
let lang_data = document.querySelector('#language_data')
let fragment_variable = new DocumentFragment();
languages_var.forEach((language) => {
let li_var = document.createElement('li');
li_var.innerHTML = language;
fragment_variable.appendChild(li_var);
})
lang_data.appendChild(fragment_variable);
</script>
</body>
</html>
Output
The illustration displays the resulting data generated by employing the DocumentFragment technique.
Example 3:
The example below demonstrates the functionality of the DocumentFragment method utilizing append methods. In this scenario, the JavaScript append method can be applied to the unordered list.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript DocumentFragment() Interface or Method </title>
</head>
<body>
<h3> JavaScript DocumentFragment() Using the append() Method </h3>
<p> The append() method of the DocumentFragment is used to build DOM nodes to the active DOM tree. </p>
<ul id = "language_data"></ul>
<script>
let languages_var = ['Java', 'TypeScript', 'PHP', 'Perl','AngularJs'];
let lang_data = document.querySelector('#language_data')
let fragment_variable = new DocumentFragment();
languages_var.forEach((language) => {
let li_var = document.createElement('li');
li_var.innerHTML = language;
fragment_variable.append(li_var);
})
lang_data.append(fragment_variable);
</script>
</body>
</html>
Output
The illustration displays the output results generated through the DocumentFragment approach.
Example 4:
The subsequent illustration demonstrates the functionality of the createDocumentFragment method by employing fundamental techniques. In this instance, the method is utilized alongside the document function to present data from an array.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript DocumentFragment() Interface or Method </title>
</head>
<body>
<h3> JavaScript cretaeDocumentFragment() Interface or Method </h3>
<p> The createDocumentFragment is typically used to build and add or insert DOM nodes to the active DOM tree. </p>
<ul id = "language_data"></ul>
<script>
let languages_var = ['Jquery', 'JavaScript', 'TypeScript', 'NodeJs','AngularJs'];
let lang_data = document.querySelector('#language_data')
let fragment_variable = document.createDocumentFragment();
languages_var.forEach((language) => {
let li_var = document.createElement('li');
li_var.innerHTML = language;
fragment_variable.appendChild(li_var);
})
lang_data.appendChild(fragment_variable);
</script>
</body>
</html>
Output
The illustration displays the results generated by employing the DocumentFragment approach.
Example 5:
The subsequent illustration demonstrates how the createDocumentFragment function operates by utilizing fundamental methods. In this case, you employ various data types alongside the document function to exhibit data from an array.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript DocumentFragment() Interface or Method </title>
</head>
<body>
<h3> JavaScript cretaeDocumentFragment() Interface or Method </h3>
<p> The createDocumentFragment is typically used to build and add or insert DOM nodes to the active DOM tree. </p>
<ul id = "language_data"></ul>
<button onclick = "click_here();"> Click Here </button>
<script>
function click_here(){
let languages_var = ['1', 'AngularJs', '0.11', 'TypeScript', 'NodeJs'];
let lang_data = document.querySelector('#language_data')
let fragment_variable = document.createDocumentFragment();
languages_var.forEach((language) => {
let li_var = document.createElement('li');
li_var.innerHTML = language;
fragment_variable.append(li_var);
})
lang_data.append(fragment_variable);
}
</script>
</body>
</html>
Output
The illustration displays the result data generated through the DocumentFragment technique.
Conclusion
The DocumentFragment approach assists in generating lists and various HTML elements while showcasing array data through JavaScript functions. This technique is beneficial for both users and developers in organizing and manipulating data arrays effectively.