HTML DOM createDocumentFragment() Method Last Updated : 03 Sep, 2024 Comments Improve Suggest changes Like Article Like Report The createDocumentFragment() method in HTML DOM is used to create the document fragment which is useful for changing the content of the document such as deleting, modifying, or adding a new node. This method creates the document fragment, then appends the elements of the document to the document fragment and makes the changes according to the need. Finally, append the document fragment to the document. It is a safe method and thus prevents the destruction of the DOM structure. Syntax:document.createDocumentFragment()Parameters: This method does not accept any parameter. Return Value: It returns the created DocumentFragment node. Example: HTML <!DOCTYPE html> <html> <head> <title>HTML DOM createDocumentFragment() Method</title> </head> <body> <h1>GeeksforGeeks</h1> <h3>DOM createDocumentFragment() Method</h3> <p> Click on the button to change list element </p> <ul> <li>Data Structure</li> <li>Operating System</li> <li>C Programming</li> <li>DBMS</li> </ul> <button onclick="myGeeks()"> Click Here! </button> <!-- Script to delete first child of the list, and modify list --> <script> function myGeeks() { let doc = document.createDocumentFragment(); doc.appendChild(document.getElementsByTagName("li")[0]); doc.childNodes[0].childNodes[0].nodeValue = "SQL"; document.getElementsByTagName("ul")[0].appendChild(doc); } </script> </body> </html> Output: Supported Browsers: The browser supported by DOM createDocumentFragment() Method are listed below:Google ChromeEdge FirefoxOperaSafari Comment More infoAdvertise with us P ProgrammerAnvesh Follow Improve Article Tags : Web Technologies HTML HTML-DOM HTML-Methods Similar Reads HTML | DOM Style pageBreakBefore Property The pageBreakBefore property in HTML DOM is used to set or return the page-break-before characteristics before the specified element in HTML document. This property works in print and print preview mode. The pageBreakBefore property has no effect on absolutely positioned elements in the HTML DOM. Th 2 min read HTML | DOM Summary Object The DOM Summary Object is used to represent the HTML <summary> element . The Summary element is accessed by getElementById(). Syntax: document.getElementById("ID"); Where “id†is the ID assigned to the “summary†tag. Example-1: html <!DOCTYPE html> <html> <head> <title> 2 min read HTML | DOM Style userSelect Property The DOM Style UserSelect Property is used to set or return whether the text can be selected by the user or not. Syntax: It is used to return the property: object.style.userSelectIt is used to set the property: object.style.userSelect = "auto|none|text|all" Properties : auto: It has the default value 2 min read HTML | DOM Title Object The Title Object in HTML DOM is used to represent the HTML <title> element. The <title> element can be accessed by using getElementByTagName() method. Syntax: document.getElementByTagName(); Properties: The title object contains single property text which is used to set or return a text 2 min read HTML DOM | Style paddingLeft Property The Style paddingLeft property is used for setting or returning the left padding of an element. The padding property inserts the user desired space within the border of an element.Syntax : To get the property: object.style.paddingLeftTo set the property: object.style.left = "auto|length|%|initial|in 2 min read HTML | DOM Style paddingBottom Property The Style paddingBottom property is used for setting or returning the bottom padding of an element. The padding property inserts the user desired space within the border of an element. Syntax: To get the property:object.style.paddingBottomTo set the property value:object.style.paddingBottom = "%|len 2 min read HTML DOM Style outlineOffset Property The Style outlineOffset property in HTML DOM is used to set or return the outline offset and draw it beyond the border edge. Outlines do not take space, unlike borders. It returns a string that represents the outline-offset property of an element. Syntax: Return the outlineOffset property.object.st 1 min read HTML | DOM Style paddingTop Property The Style paddingTop property is used for setting or returning the top padding of an element. The padding property inserts the user desired space within the border of an element. Syntax : To get the property:object.style.paddingTopTo set the property:object.style.paddingTop = "%|length|initial|inher 2 min read HTML DOM Style listStyleType Property The HTML DOM Style listStyleType property is used to set or return the list-item marker type. It has default values as "disc" for <ul> and "decimal" for <ol> and returns a string that represents the type of the list. SyntaxReturns the listStyleType property.object.style.listStyleTypeSet 2 min read HTML DOM Option Object The HTML DOM Option object represents an individual <option> element within a <select>, <datalist>, or <optgroup>. It allows JavaScript to access and manipulate the properties of options, such as setting the text, value, or whether an option is selected.Properties:disabled: T 2 min read Like