Is there any way to find an element in a documentFragment?

by

All of these answers are rather old, from back when querySelectorAll and querySelector were not widely available. It should be noted that these two functions which accept CSS selectors as parameters do work on DocumentFragments in modern browsers, and should be the preferred way of dealing with the situation in the question. The alternate solutions presented in some of the answers would be a good approach for legacy browsers which did not support querySelectorAll or querySelector.

Here is an example usage:

var df = document.createDocumentFragment();
var div = document.createElement('div');
div.id = 'foo';
df.appendChild(div);
var result = df.querySelector('#foo'); // result contains the div element

A good implementation should first use object detection to see if the browser supports this. For instance:

function getElementByIdInFragment(fragment, id) {
    if (fragment.querySelector) {
        return fragment.querySelector('#' + id);
    } else {
        // your custom implementation here
    }
}

More Related Contents:

  1. Parse an HTML string with JS
  2. jQuery document.createElement equivalent?
  3. Browser detection versus feature detection
  4. When should I use jQuery’s document.ready function?
  5. How can I count text lines inside an DOM element? Can I?
  6. Difference between HTMLCollection, NodeLists, and arrays of objects
  7. querySelector, wildcard element match?
  8. Copy / Put text on the clipboard with FireFox, Safari and Chrome
  9. How to serialize DOM node to JSON even if there are circular references?
  10. Most efficient method of detecting/monitoring DOM changes?
  11. How do I replace text inside a div element?
  12. Dynamically creating HTML elements using Javascript?
  13. What’s standard behavior when element is clicked? Will it submit the form?
  14. Add SVG element to existing SVG using DOM
  15. How to access DOM elements in electron?
  16. Trigger CSS transition on appended element
  17. Difference between .tagName and .nodeName
  18. How to retrieve the element where a contextmenu has been executed
  19. Removing HTMLCollection elements from the DOM
  20. HTML Table with vertical rows
  21. link element onload
  22. Is it the last `script` element the currently running script?
  23. Inserting arbitrary HTML into a DocumentFragment
  24. Is there a difference between `new Image()` and `document.createElement(‘img’)`?
  25. How to add DOM element script to head section?
  26. Best practice for embedding arbitrary JSON in the DOM?
  27. Delaying a jquery script until everything else has loaded
  28. React, losing saved data in localStorage with useEffect after page refresh
  29. Boolean HTML Attributes
  30. How can I determine if a dynamically-created DOM element has been added to the DOM?

Leave a Comment