20

I've done quite a bit of searching for a solution to this problem but so far haven't found one that works cross browser.

What I need is a raw javascript function which will take an element and run a callback once the innerHTML has successfully been inserted into the dom.

e.g.

    var element = document.getElementById('example');
        element.innerHTML = newhtml;

    waitUntilReady(element, function(){
            //do stuff here...
    });

So just to summarize, I need to be able to check the contents of the element and fire a callback when innerHTML has completed.

Thanks in advance for any help.

gordyr
  • 5,888
  • 14
  • 54
  • 120

1 Answers1

5

There is no need for such a function. Assigning to innerHTML will do so immediately before continuing to run any scripts.

If you really need to delay execution (say to allow the browser to redraw), use setTimeout with a delay of 1 (or other short interval).

Niet the Dark Absol
  • 311,322
  • 76
  • 447
  • 566
  • 1
    Ahh, if that is indeed the case then great. But this still leaves me with my original issue. I am dynamically inserting a script straight after appending the html which attaches events to certain elements contained within the new html. While this works fine on most browsers older IE 8 and below seem be returning that the element is null about 50% of the time. My assumption was that this was because the newly inserted html was not always 'ready' when I was attempting to attache events to it. – gordyr Jul 16 '12 at 22:27
  • Make sure the scripts are being added to the page somewhere after the `innerHTML` assignment and there's no reason for it to not work. – Niet the Dark Absol Jul 16 '12 at 22:28
  • They are indeed. Yet it still seems to have only a 50% success rate in older versions of IE. I suppose the problem must lay elsewhere in my code and my assumption about the html not being 'ready' was incorrect. – gordyr Jul 16 '12 at 22:30
  • 7
    I am doing something like: element.innerHTML = "
    "; but on the next line element.children[0].offsetWidth is 0, I assume because it has not rendered yet. This is on latest Chrome. Anyone have any ideas?     – pilavdzice Mar 18 '14 at 19:06
  • 1
    @pilavdzice - read this: http://stackoverflow.com/questions/779379/why-is-settimeoutfn-0-sometimes-useful – biphobe Jun 12 '14 at 16:07
  • You may also have to get the element again, by just repeating the first line of the code, with the getElementById. – D.Bugger May 11 '17 at 10:25
  • This is incorrect as of Chrome 76. When setting innerHTML and then calling getElementByID for an element inside the new markup, the result is undefined 50% of the time I've found. – Hackstaar May 02 '20 at 19:07
  • @JudsonHudson Can you show an example of this happening? – Niet the Dark Absol May 02 '20 at 19:54