Call a javascript function after loading the Div

Question

Hi,

How to call the javascript function, after loading the particular div?

Thanks in advance.

Answer 1

Typically, JavaScript execution is deferred till after the entire document is loaded by using the window.onload event.

window.onload = function() {
    // Do stuff
};

Otherwise, if you don't want to or if you have no need to wait for the entire document to load, you can include your JavaScript directly after the closing tag of the element (div) which you are concerned with.

<div>
  ...
</div>
<script src="blah-blah-blah.js"></script>

Answer 2

Not all elements have an "onload" event attached to it (only body, frame, frameset, iframe, and img have an "onload" event).

I would suggest using jQuery and attaching the element to the "ready" event:

    <script type="text/javascript">
        $("#one").ready(function () {
            //do something
        });
    </script>
    <div id="one"></div>

This will execute before the "onload" event of the body fires and will also work if you're dynamically adding the element after the page loads.

Answer 3

if i'm right you may want check if an element ( div ) exists in the DOM before execute function so

assuming your div is

<div id="my_cool_div"></div>

raw javascript

if (document.getElementById('my_cool_div') != null) {
//do something
}

jQuery

if ( $("#my_cool_div").length > 0 ) {
//do something
}

Answer 4

I'd check if div exists in DOM like this : javascript

 if(document.getElementById('myDiv'))

or jQuery

if($("#myDiv"))