25

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
  • 6,078
  • 14
  • 65
  • 123

1 Answers1

6

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
  • 320,036
  • 81
  • 464
  • 592
  • 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
  • > "There is no need for such a function. Assigning to innerHTML will do so immediately before continuing to run any scripts." That may be so, but the browser may not have rendered it. For instance, in my chat app, a large `div` update followed by a `scrolltobottom` fails to actually reach the bottom because the div isn't all that full (yet.) Waiting allows it to work properly; but a solution that actually finds out if the div is fully rendered is called for to address this circumstance. – fyngyrz Feb 18 '23 at 02:03