How can I determine if a dynamically-created DOM element has been added to the DOM?

by

UPDATE: For anyone interested in it, here is the implementation I finally used:

function isInDOMTree(node) {
   // If the farthest-back ancestor of our node has a "body"
   // property (that node would be the document itself), 
   // we assume it is in the page's DOM tree.
   return !!(findUltimateAncestor(node).body);
}
function findUltimateAncestor(node) {
   // Walk up the DOM tree until we are at the top (parentNode 
   // will return null at that point).
   // NOTE: this will return the same node that was passed in 
   // if it has no ancestors.
   var ancestor = node;
   while(ancestor.parentNode) {
      ancestor = ancestor.parentNode;
   }
   return ancestor;
}

The reason I wanted this is to provide a way of synthesizing the onload event for DOM elements. Here is that function (although I am using something slightly different because I am using it in conjunction with MochiKit):

function executeOnLoad(node, func) {
   // This function will check, every tenth of a second, to see if 
   // our element is a part of the DOM tree - as soon as we know 
   // that it is, we execute the provided function.
   if(isInDOMTree(node)) {
      func();
   } else {
      setTimeout(function() { executeOnLoad(node, func); }, 100);
   }
}

For an example, this setup could be used as follows:

var mySpan = document.createElement("span");
mySpan.innerHTML = "Hello world!";
executeOnLoad(mySpan, function(node) { 
   alert('Added to DOM tree. ' + node.innerHTML);
});

// now, at some point later in code, this
// node would be appended to the document
document.body.appendChild(mySpan);

// sometime after this is executed, but no more than 100 ms after,
// the anonymous function I passed to executeOnLoad() would execute

Hope that is useful to someone.

NOTE: the reason I ended up with this solution rather than Darryl’s answer was because the getElementById technique only works if you are within the same document; I have some iframes on a page and the pages communicate between each other in some complex ways – when I tried this, the problem was that it couldn’t find the element because it was part of a different document than the code it was executing in.

More Related Contents:

  1. jQuery. Find all attribute values within/under elements `script or noscript or iframe` that have attribute keys as `src or href` [closed]
  2. When I load the page the alert(“hey”) function appears, why does the js function execute despite no onClick call? How do I prevent it from doing so?
  3. How may I sort a list alphabetically using jQuery?
  4. If a DOM Element is removed, are its listeners also removed from memory?
  5. Advantages of createElement over innerHTML?
  6. JavaScript DOM remove element
  7. How to replace DOM element in place using Javascript?
  8. How can I check if an element exists in the visible DOM?
  9. Javascript callback when IFRAME is finished loading?
  10. How to addEventListener to multiple elements in a single line
  11. What is offsetHeight, clientHeight, scrollHeight?
  12. How can I get the DOM element which contains the current selection?
  13. Difference between DOM parentNode and parentElement
  14. How to access component methods from “outside” in ReactJS?
  15. How do I serialize a DOM to XML text, using JavaScript, in a cross browser way?
  16. Get the DOM path of the clicked
  17. Console shows error about Content Security policy and lots of failed GET requests
  18. How do you set the document title in React?
  19. Can I change an HTML element’s type?
  20. “Cut and Paste” – moving nodes in the DOM with Javascript
  21. Remove specific HTML tag with its content from javascript string
  22. Is it possible to programmatically catch all events on the page in the browser?
  23. how to compare two elements in jquery [duplicate]
  24. Is there any way to accelerate the mousemove event?
  25. How do I wrap a text selection from window.getSelection().getRangeAt(0) with an html tag?
  26. Inject CSS stylesheet as string using Javascript
  27. JavaScript: Is it better to use innerHTML or (lots of) createElement calls to add a complex div structure? [duplicate]
  28. Getting the text from a drop-down box
  29. Accessing a DOM object defined in an external SVG file
  30. How can I replace one class with another on all elements, using just the DOM?

Leave a Comment