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

后端 未结 11 997
滥情空心
滥情空心 2020-12-02 20:07

According to spec, only the BODY and FRAMESET elements provide an \"onload\" event to attach to, but I would like to know when a dynamically-create

11条回答
  •  臣服心动
    2020-12-02 20:36

    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.

提交回复
热议问题