Should I use document.createDocumentFragment or document.createElement

by

The difference is that a document fragment effectively disappears when you add it to the DOM. What happens is that all the child nodes of the document fragment are inserted at the location in the DOM where you insert the document fragment and the document fragment itself is not inserted. The fragment itself continues to exist but now has no children.

This allows you to insert multiple nodes into the DOM at the same time:

var frag = document.createDocumentFragment();
var textNode = frag.appendChild(document.createTextNode("Some text"));
var br = frag.appendChild(document.createElement("br"));
var body = document.body;
body.appendChild(frag);
alert(body.lastChild.tagName); // "BR"
alert(body.lastChild.previousSibling.data); // "Some text"
alert(frag.hasChildNodes()); // false

More Related Contents:

  1. Parse an HTML string with JS
  2. jQuery document.createElement equivalent?
  3. When should I use jQuery’s document.ready function?
  4. How can I count text lines inside an DOM element? Can I?
  5. querySelector, wildcard element match?
  6. Copy / Put text on the clipboard with FireFox, Safari and Chrome
  7. How to serialize DOM node to JSON even if there are circular references?
  8. How do I replace text inside a div element?
  9. Dynamically creating HTML elements using Javascript?
  10. What’s standard behavior when element is clicked? Will it submit the form?
  11. How to bind bootstrap popover on dynamic elements
  12. getElementsByName in IE7
  13. Add SVG element to existing SVG using DOM
  14. How to access DOM elements in electron?
  15. Trigger CSS transition on appended element
  16. Chrome extension adding external javascript to current page’s html
  17. JavaScript: DOM load events, execution sequence, and $(document).ready()
  18. Difference between .tagName and .nodeName
  19. How to retrieve the element where a contextmenu has been executed
  20. Removing HTMLCollection elements from the DOM
  21. HTML Table with vertical rows
  22. How AJAX is done in github source browse?
  23. How to give a Blob uploaded as FormData a file name?
  24. Add an element to the DOM with JavaScript
  25. What is the difference between Document and document in JavaScript?
  26. Storing a variable in the JavaScript ‘window’ object is a proper way to use that object?
  27. Retrieving value from with multiple option in React
  28. JavaScript: get the current executing node? [duplicate]
  29. How do I find the DOM node that is at a given (X,Y) position? (Hit test)
  30. Why is iframe.contentWindow == null?

Leave a Comment