How to add onload event to a div element

Question

How do you add an onload event to an element   Can I use    lt div onload  oQuickReply swap      gt  lt  div gt    for this

User · Answer

I needed to have some initialization code run after a chunk of html (template instance) was inserted, and of course I didn't have access to the code that manipulates the template and modifies the DOM. The same idea holds for any partial modification of the DOM by insertion of an html element, usually a <div>.

Some time ago, I did a hack with the onload event of a nearly invisible <img> contained in a <div>, but discovered that a scoped, empty style will also do:

<div .... >
<style scoped="scoped" onload="dosomethingto(this.parentElement);" >   </style>
.....
</div>

Update(Jul 15 2017) - The <style> onload is not supported in last version of IE. Edge does support it, but some users see this as a different browser and stick with IE. The <img> element seems to work better across all browsers.

<div...>
<img onLoad="dosomthing(this.parentElement);" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
...
</div>

To minimize the visual impact and resource usage of the image, use an inline src that keeps it small and transparent.

One comment I feel I need to make about using a <script>is how much harder it is to determine which <div> the script is near, especially in templating where you can't have an identical id in each instance that the template generates. I thought the answer might be document.currentScript, but this is not universally supported. A <script> element cannot determine its own DOM location reliably; a reference to 'this' points to the main window, and is of no help.

I believe it is necessary to settle for using an <img> element, despite being goofy. This might be a hole in the DOM/javascript framework that could use plugging.

User · Answer

onload event it only supports with few tags like listed below    lt body gt    lt frame gt    lt iframe gt    lt img gt    lt input type  image  gt    lt link gt    lt script gt    lt style gt    Here the reference for onload event

User · Answer

I just want to add here that if any one want to call a function on load event of div  amp  you don t want to use jQuery due to conflict as in my case  then simply call a function after all the html code or any other code you have written including the function code and  simply call a function       All Other Code   ----- ------    ----At the end ----     lt script type  text javascript  gt     function name     lt  script gt    OR     All Other Code   ----- ------    ----At the end ----     lt script type  text javascript  gt   function my func       function definition               my func     lt  script gt

User · Answer

As all said  you cannot use onLoad event on a DIV instead but it before  body tag   but in case you have one footer file and include it in many pages  it s better to check first if the div you want is on that page displayed  so the code doesn t executed in the pages that doesn t contain that DIV to make it load faster and save some time for your application   so you will need to give that DIV an ID and do   var myElem   document getElementById  myElementId    if  myElem     null   put your code here

User · Answer

we can use MutationObserver to solve the problem in efficient way adding a sample code below   lt  DOCTYPE html gt   lt html gt   lt head gt       lt title gt  lt  title gt       lt style gt           second              position  absolute              width  100px              height  100px              background-color   a1a1a1                 lt  style gt   lt  head gt   lt body gt   lt div id  first  gt  lt  div gt   lt script gt      var callthis   function element              element setAttribute  tabIndex  0           element focus            element onkeydown   handler          function handler                    alert  called                         var observer   new WebKitMutationObserver function mutations            mutations forEach function mutation                for  var i   0  i  lt  mutation addedNodes length  i                if mutation addedNodes i  id      second                    callthis mutation addedNodes i                                          observer observe document getElementById  first      childList  true           var ele   document createElement  div        ele id    second       document getElementById  first   appendChild ele     lt  script gt    lt  body gt   lt  html gt

User · Answer

Avoid using any interval based methods and use MutationObserver targeting a parent div of dynamically loaded div for better efficiency  Here s the simple snippet  HTML   lt div class  quot parent-static-div quot  gt     lt div class  quot dynamic-loaded-div quot  gt      this div is loaded after DOM ready event    lt  div gt   lt  div gt   JS  var observer   new MutationObserver function  mutationList  obsrvr      var div to check   document querySelector  quot  dynamic-loaded-div quot      get div by class      var div to check   document getElementById  div-id      get div by id    console log  quot checking for div    quot      if  div to check        console log  quot div is loaded now quot       DO YOUR STUFF      obsrvr disconnect       stop observing     return           var parentElement   document querySelector  quot parent-static-div quot       use parent div which is already present in DOM to maximise efficiency    var parentElement   document    if not sure about parent div then just use whole  document      start observing for dynamic div observer observe parentElement         for properties details  https   developer mozilla org en-US docs Web API MutationObserverInit   childList  true    subtree  true

User · Answer

You cannot add event onload on div  but you can add onkeydown and trigger onkeydown event on document load    x000D   x000D    function    x000D    x000D        ccsdvCotentPS   trigger  onkeydown    x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 2 3 jquery min js  gt  lt  script gt  x000D   x000D   lt div  onkeydown  setCss      gt   lt  div gt   x000D   x000D   x000D

User · Answer

Try this  And never use trigger twice on div   You can define function to call before the div tag     function           div onload    trigger  onload          DEMO  jsfiddle

User · Answer

Since the onload event is only supported on a few elements  you have to use an alternate method   You can use a MutationObserver for this    x000D   x000D  const trackElement   element   gt    x000D    let present   false  x000D    const checkIfPresent        gt    x000D      if  document body contains element     x000D        if   present    x000D          console log  in DOM    element   x000D          x000D        present   true  x000D        else if  present    x000D        present   false  x000D        console log  Not in DOM    x000D        x000D       x000D   x000D    const observer   new MutationObserver checkIfPresent   x000D    observer observe document body    childList  true     x000D    checkIfPresent    x000D   x000D    return observer  x000D     x000D   x000D  const element   document querySelector   element    x000D  const add        gt  document body appendChild element   x000D  const remove        gt  element remove    x000D   x000D  trackElement element   x000D   lt button onclick  add    gt Add lt  button gt  x000D   lt button onclick  remove    gt Remove lt  button gt  x000D   x000D   lt div id  element  gt Element lt  div gt  x000D   x000D   x000D

User · Answer

we can use all these tags with onload  lt body gt    lt frame gt    lt frameset gt    lt iframe gt    lt img gt    lt input type  quot image quot  gt    lt link gt    lt script gt  and  lt style gt   eg   x000D   x000D  function loadImage         alert  Image is loaded      x000D   lt img src  https   www w3schools com tags w3html gif  onload  loadImage    width  100  height  132  gt  x000D   x000D   x000D

User · Answer

You can trigger some js automatically on an IMG element using onerror  and no src    lt img src onerror  alert    gt

User · Answer

You can attach an event listener as below  It will trigger whenever the div having selector  my-id loads completely to DOM        document  on  EventName     my-id   function         do something       Inthis case EventName may be  load  or  click   https   api jquery com on  on-events-selector-data-handler

User · Answer

I had the same question and was trying to get a Div to load a scroll script  using onload or load  The problem I found was that it would always work before the Div could open  not during or after  so it wouldn t really work   Then I came up with this as a work around    lt body gt    lt span onmouseover  window scrollTo 0  document body scrollHeight     onmouseout  window scrollTo 0  document body scrollHeight    gt    lt div id    gt   lt  div gt    lt a href    onclick  window scrollTo 0  document body scrollHeight    gt Link to open Div lt  a gt    lt  span gt   lt  body gt    I placed the Div inside a Span and gave the Span two events  a mouseover and a mouseout  Then below that Div  I placed a link to open the Div  and gave that link an event for onclick  All events the exact same  to make the page scroll down to bottom of page  Now when the button to open the Div is clicked  the page will jump down part way  and the Div will open above the button  causing the mouseover and mouseout events to help push the scroll down script  Then any movement of the mouse at that point will push the script one last time

User · Answer

I really like the YUI3 library for this sort of thing    lt div id  mydiv  gt       lt  div gt    lt script gt  YUI   use  node-base   function Y      Y on  available   someFunction    mydiv        See  http   developer yahoo com yui 3 event  onavailable

User · Answer

The onload event can only be used on the document body  itself  frames  images  and scripts  In other words  it can be attached to only body and or each external resource  The div is not an external resource and it s loaded as part of the body  so the onload event doesn t apply there

User · Answer

Try this    x000D   x000D  document getElementById  div   onload   alert  This is a div     x000D   lt div id  div  gt Hello World lt  div gt  x000D   x000D   x000D    Try this one too  You need to remove   from oQuickReply swap   to make the function working    x000D   x000D  document getElementById  div   onload   oQuickReplyswap    x000D  function oQuickReplyswap     x000D  alert  Hello World    x000D    x000D   lt div id  div  gt  lt  div gt  x000D   x000D   x000D

User · Answer

No  you can t  The easiest way to make it work would be to put the function call directly after the element   Example        lt div id  somid  gt Some content lt  div gt   lt script type  text javascript  gt     oQuickReply swap  somid     lt  script gt        or - even better - just in front of  lt  body gt         lt script type  text javascript  gt     oQuickReply swap  somid     lt  script gt   lt  body gt       so it doesn t block the following content from loading

User · Answer

use an iframe and hide it iframe works like a body tag   lt  DOCTYPE html gt   lt html gt   lt body gt    lt iframe style  display none  onload  myFunction    src  http   www w3schools com  gt  lt  iframe gt   lt p id  demo  gt  lt  p gt    lt script gt  function myFunction         document getElementById  demo   innerHTML    Iframe is loaded       lt  script gt    lt  body gt   lt  html gt

User · Answer

I am learning javascript and jquery and was going through all the answer  i faced same issue when calling javascript function for loading div element  I tried     lt divid gt    ready function   alert  test    and it worked for me  I want to know is this good way to perform onload call on div element in the way i did using jquery selector   thanks

User · Answer

Use the body onload event instead  either via attribute   lt body onload  myFn    gt       or by binding an event in Javascript   This is extremely common with jQuery     document  ready function         doSomething     myDiv

User · Answer

In November 2019  I am seeking a way to create a  hypothetical  onparse EventListener for  lt elements gt  which don t take onload   The  hypothetical  onparse EventListener must be able to listen for when an element is parsed     Third Attempt  and Definitive Solution   I was pretty happy with the Second Attempt below  but it just struck me that I can make the code shorter and simpler  by creating a tailor-made event   let parseEvent   new Event  parse      This is the best solution yet   The example below    Creates a tailor-made parse Event Declares a function  which can be run at window onload or any time  which    Finds any elements in the document which include the attribute data-onparse Attaches the parse EventListener to each of those elements Dispatches the parse Event to each of those elements to execute the Callback    Working Example    x000D   x000D     Create  homemade  parse event x000D  let parseEvent   new Event  parse    x000D   x000D     Create Initialising Function which can be run at any time x000D  const initialiseParseableElements        gt    x000D   x000D       Get all the elements which need to respond to an onparse event x000D    let elementsWithParseEventListener   document querySelectorAll   data-onparse     x000D     x000D       Attach Event Listeners and Dispatch Events x000D    elementsWithParseEventListener forEach  elementWithParseEventListener    gt    x000D   x000D      elementWithParseEventListener addEventListener  parse   updateParseEventTarget  false   x000D      elementWithParseEventListener dataset onparsed   elementWithParseEventListener dataset onparse  x000D      elementWithParseEventListener removeAttribute  data-onparse    x000D      elementWithParseEventListener dispatchEvent parseEvent   x000D        x000D    x000D   x000D     Callback function for the Parse Event Listener x000D  const updateParseEventTarget    e    gt    x000D     x000D    switch  e target dataset onparsed    x000D   x000D      case   update-1     e target textContent    My First Updated Heading   break  x000D      case   update-2     e target textContent    My Second Updated Heading   break  x000D      case   update-3     e target textContent    My Third Updated Heading   break  x000D      case   run-oQuickReply swap       e target innerHTML    This  lt code gt  amp lt div amp gt  lt  code gt  is now loaded and the function  lt code gt oQuickReply swap   lt  code gt  will run      break  x000D      x000D    x000D   x000D     Run Initialising Function x000D  initialiseParseableElements    x000D   x000D  let dynamicHeading   document createElement  h3    x000D  dynamicHeading textContent    Heading Text   x000D  dynamicHeading dataset onparse    update-3   x000D   x000D  setTimeout      gt    x000D   x000D       Add new element to page after time delay x000D    document body appendChild dynamicHeading   x000D   x000D       Re-run Initialising Function x000D    initialiseParseableElements    x000D   x000D     3000   x000D  div   x000D    width  300px  x000D    height  40px  x000D    padding  12px  x000D    border  1px solid rgb 191  191  191   x000D    x000D   x000D  h3   x000D  position  absolute  x000D  top  0  x000D  right  0  x000D    x000D   lt h2 data-onparse  update-1  gt My Heading lt  h2 gt  x000D   lt h2 data-onparse  update-2  gt My Heading lt  h2 gt  x000D   lt div data-onparse  run-oQuickReply swap    gt  x000D  This div hasn t yet loaded and nothing will happen  x000D   lt  div gt  x000D   x000D   x000D      Second Attempt  The First Attempt below  based on  JohnWilliams  brilliant Empty Image Hack  used a hardcoded  lt img   gt  and worked   I thought it ought to be possible to remove the hardcoded  lt img   gt  entirely and only dynamically insert it after detecting  in an element which needed to fire an onparse event  an attribute like   data-onparse  run-oQuickReply swap      It turns out  this works very well indeed   The example below    Finds any elements in the document which include the attribute data-onparse Dynamically generates an  lt img src   gt  and appends it to the document  immediately after each of those elements Fires the onerror EventListener when the rendering engine parses each  lt img src   gt  Executes the Callback and removes that dynamically generated  lt img src   gt  from the document   Working Example    x000D   x000D     Get all the elements which need to respond to an onparse event x000D  let elementsWithParseEventListener   document querySelectorAll   data-onparse     x000D   x000D     Dynamically create and position an empty  lt img gt  after each of those elements  x000D  elementsWithParseEventListener forEach  elementWithParseEventListener    gt    x000D   x000D    let emptyImage   document createElement  img    x000D    emptyImage src       x000D    elementWithParseEventListener parentNode insertBefore emptyImage  elementWithParseEventListener nextElementSibling   x000D      x000D   x000D     Get all the empty images x000D  let parseEventTriggers   document querySelectorAll  img src        x000D   x000D     Callback function for the EventListener below x000D  const updateParseEventTarget    e    gt    x000D   x000D    let parseEventTarget   e target previousElementSibling  x000D     x000D    switch  parseEventTarget dataset onparse    x000D   x000D      case   update-1     parseEventTarget textContent    My First Updated Heading   break  x000D      case   update-2     parseEventTarget textContent    My Second Updated Heading   break  x000D      case   run-oQuickReply swap       parseEventTarget innerHTML    This  lt code gt  amp lt div amp gt  lt  code gt  is now loaded and the function  lt code gt oQuickReply swap   lt  code gt  will run      break  x000D      x000D     x000D       Remove empty image x000D    e target remove    x000D    x000D   x000D     Add onerror EventListener to all the empty images x000D  parseEventTriggers forEach  parseEventTrigger    gt    x000D     x000D    parseEventTrigger addEventListener  error   updateParseEventTarget  false   x000D     x000D      x000D  div   x000D    width  300px  x000D    height  40px  x000D    padding  12px  x000D    border  1px solid rgb 191  191  191   x000D    x000D   lt h2 data-onparse  update-1  gt My Heading lt  h2 gt  x000D   lt h2 data-onparse  update-2  gt My Heading lt  h2 gt  x000D   lt div data-onparse  run-oQuickReply swap    gt  x000D  This div hasn t yet loaded and nothing will happen  x000D   lt  div gt  x000D   x000D   x000D      First Attempt  I can build on  JohnWilliams   lt img src gt  hack  on this page  from 2017  - which is  so far  the best approach I have come across   The example below    Fires the onerror EventListener when the rendering engine parses  lt img src   gt  Executes the Callback and removes the  lt img src   gt  from the document   Working Example    x000D   x000D  let myHeadingLoadEventTrigger   document getElementById  my-heading-load-event-trigger    x000D   x000D  const updateHeading    e    gt    x000D   x000D    let myHeading   e target previousElementSibling  x000D     x000D    if  true        lt   CONDITION HERE x000D       x000D      myHeading textContent    My Updated Heading   x000D      x000D     x000D       Modern alternative to document body removeChild e target   x000D    e target remove    x000D    x000D   x000D  myHeadingLoadEventTrigger addEventListener  error   updateHeading  false   x000D   lt h2 gt My Heading lt  h2 gt  x000D   lt img id  my-heading-load-event-trigger  src   gt  x000D   x000D   x000D

User · Answer

When you load some html from server and insert it into DOM tree you can use  DOMSubtreeModified however it is deprecated - so you can use MutationObserver or just detect new content inside loadElement function directly so you will don t need to wait for DOM events   x000D   x000D  var ignoreFirst 0  x000D  var observer    new MutationObserver  m  ob   gt  x000D    x000D    if ignoreFirst   gt 0    x000D      console log  Element add on   new Date     x000D      x000D    x000D     observe content   childList  true  subtree true     x000D   x000D   x000D     simulate element loading x000D  var tmp 1  x000D  function loadElement name      x000D    setTimeout     gt   x000D      console log  Element   name  loaded   x000D      content innerHTML      lt div gt My name is   name  lt  div gt     x000D      1500 tmp    x000D      x000D   x000D  loadElement  Michael    x000D  loadElement  Madonna    x000D  loadElement  Shakira    x000D   lt div id  content  gt  lt div gt  x000D   x000D   x000D

User · Answer

You could use an interval to check for it until it loads like this   https   codepen io pager pen MBgGGM   let checkonloadDoSomething   setInterval      gt      let onloadDoSomething   document getElementById  onloadDoSomething      if  onloadDoSomething        onloadDoSomething innerHTML  Loaded      clearInterval checkonloadDoSomething       else   enter code here      console log  Waiting for onloadDoSomething to load           100

User · Answer

First to answer your question  No  you can t  not directly like you wanted to do so  May be a bit late to answer  but this is my solution  without jQuery  pure javascript  It was originally written to apply a resize function to textareas after DOM is loaded and on keyup   Same way you could use it to do something with  all  divs or only one  if specified  like so   document addEventListener  DOMContentLoaded   function         var divs   document querySelectorAll  div       all divs     var mydiv   document getElementById  myDiv       only div myDiv     divs forEach  div   gt            do something with all divs div               do something with mydiv mydiv         If you really need to do something with a div  loaded after the DOM is loaded  e g  after an ajax call  you could use a very helpful hack  which is easy to understand an you ll find it    working-with-elements-before-the-dom-is-ready     It says  before the DOM is ready  but it works brillant the same way  after an ajax insertion or js-appendChild-whatever of a div  Here s the code  with some tiny changes to my needs   css   loaded      I use only class loaded instead of a nodename     animation-name  nodeReady      animation-duration  0 001s      keyframes nodeReady         from   clip  rect 1px  auto  auto  auto         to   clip  rect 0px  auto  auto  auto           javascript  document addEventListener  animationstart   function event        var e   event    window event      if  e animationName     nodeReady             e target classList remove  loaded            do something else             false

[javascript] How to add onload event to a div element

Examples related to javascript

Examples related to html