Javascript DOM HTML Document createDocumentFragment() Method

Introduction

Create a documentFragment node and append a child to a list item.

<!DOCTYPE html>
<html>
<body>
<ul><li>CSS</li><li>HTML</li></ul>

<button onclick="myFunction()">Test</button>

<script>
function myFunction() {//from   ww w  .ja v a 2 s  .co m
  var d = document.createDocumentFragment();
  d.appendChild(document.getElementsByTagName("LI")[0]);
  d.childNodes[0].childNodes[0].nodeValue = "CSS";
  document.getElementsByTagName("UL")[0].appendChild(d);
}
</script>

</body>
</html>

The createDocumentFragment() method creates an imaginary Node object, with all the properties and methods of the Node object.

It is used when you extract parts of your document, change, add, or delete, some of the content, and insert it back to your document.

Nodes being appended to the document fragment, from the document, will be removed from the document.

The createDocumentFragment() method returns a DocumentFragment object representing the created DocumentFragment node.

Previous Next

Javascript DOM HTML Document createDocumentFragment() Method

Introduction

Related