How to Add Onload Event to a Div Element

How to add onload event to a div element

No, you can't. The easiest way to make it work would be to put the function call directly after the element

Example:

...
<div id="somid">Some content</div>
<script type="text/javascript">
oQuickReply.swap('somid');
</script>
...

or - even better - just in front of </body>:

...
<script type="text/javascript">
oQuickReply.swap('somid');
</script>
</body>

...so it doesn't block the following content from loading.

I want to add onload='startGame()' in my div

You don't have to add onload to a div.

<div id="gmdemo">Some content</div>

<script type="text/javascript">
startGame('gmdemo');
</script>

Simple Javascript not working: div onload=alert(Hi);

You can't attach onload to a div. Try putting it in the <body>:

<body onload="pop_alert();">

How to make a div onload function?

you can use jQuery.load to load the contents of the page into your div

$(document).ready(function() {
$("#containing-div").load("[url of page with onload function]");
});

the code above goes in the page that contains the div. the page with the onload function doesn't get changed.

onload event in programmatically added attribute

Is this what you want?

function create() {var para = document.createElement("p");
var node = document.createTextNode("This is new.");para.appendChild(node);
para.onload = myFunction();
var element = document.getElementById("div1");element.appendChild(para);

}
function myFunction() { alert(1);}
<div id="div1"><p id="p1">This is a paragraph.</p><p id="p2">This is another paragraph.</p></div>
<br>
<button onclick="create()">create</button>

Why doesn't onload event work as an event of my DIV?

As a proper answer: according to specs, onload works on <body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style> tags. So it won't work on plain div

Html div on load event for a dynamically added div element

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();


Related Topics



Leave a reply



Submit