Html div on load event for a dynamically added div element

If you're not already using jQuery there's no reason to start using it just for this, you can write:

window.onload = function () {
    fnName();
};

You can use DOM Mutation Observers

It will notify you every time the dom changes, e.g. when a new div is inserted into the target div or page.

I'm copy/pasting the exmple code

// select the target node
var target = document.querySelector('#some-id');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});

// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true }

// pass in the target node, as well as the observer options
observer.observe(target, config);

// later, you can stop observing
observer.disconnect();

The onload attribute probably wouldn't fire on the <div> if you're injecting it dynamically (as the document is likely already loaded, but maybe it'd still work...?). However you could either poll for the element by simply doing something like this (similar to YUI's onContentAvailable):

// when the document has loaded, start polling
window.onload = function () {
    (function () {
        var a = document.getElementById('myDiv');
        if (a) {
            // do something with a, you found the div
        }
        else {
            setTimeout(arguments.callee, 50); // call myself again in 50 msecs
        }
    }());
};

Or you could change the markup (I know nothing about XSL) to be something like this:

Earlier on in the page:

<script type="text/javascript">
    function myDivInserted() {
        // you're probably safe to use document.getElementById('myDiv') now
    }
</script>

The markup you generate with XSL:

<div id="myDiv"></div>
<script type="text/javascript">
    myDivInserted();
</script>

It's a bit hacky but it should work.


You could use jQuery. The following code would be place in your <head> tags.

$(document).ready(function() {
    // Your fnNamt function here
});

EDIT

Kobi makes a good point

You could also write $(document).ready(function(){fnNamt();});, or more simply, $(document).ready(fnNamt);, or even $(fnNamt)

Tags:

Javascript

Html

Recent Posts