Continue execution only after DOM manipulation has completed

Question

document.getElementById('my_id').innerHTML = 'A message';
// Next should only be executed once DOM manipulation has completed
.. do some stuff

I've seen this jQuery/Javascript - How to wait for manipulated DOM to update before proceeding with function, which suggests using a setTimeOut.

document.getElementById('my_id').innerHTML = 'A message';
setTimeout(function(){
     .. do some stuff 
},10);

However, this is a race, which I don't like. I need to be sure and also don't want to waste time waiting. One of the comments stated that even 0ms works because it puts it in a queue and is guaranteed to only execute after the DOM manipulation has completed. Is that absolutely certain? If so, where is this state or tested?

(The manipulation can be more complicated than this example, of course. The inserted HTML may even contain its own javascript that executes. The inserted JS execution does not have to be completed, but the rendering must have been completed.)

If it's only about detection of the rendering phase, just listen for proper events. — pietro909, May 30 '16 at 12:25
What event? This is not the initial loading, but DOM manipulation via JS. — user984003, May 30 '16 at 12:26
please read my answer: when you modify the DOM (add node, delete node, ...) some events are fired. Just look for yours and listen to it :-) — pietro909, May 30 '16 at 12:29

pietro909 · Answer 1 · 2016-05-30T12:33:48.800

1

You can use both the legacy Web events or the newer Mutation observer.

Each time you manipulate the DOM some events are triggered, not just the loading one.

In this example you are inserting HTML, so you need to listen to DOMNodeInserted event at least.

edited May 30 '16 at 12:33

answered May 30 '16 at 12:28

pietro909

1,811
1
19
26

Linking to a big long webpage with tons of events isn't really answering the question. – user984003 May 30 '16 at 12:29
I'm inserting a big chunk of HTML (as a string) into another element. – user984003 May 30 '16 at 12:32
just one doubt: your are inserting a _string_, right? But as a child tree or just as an attribute of that element? – pietro909 May 30 '16 at 12:36
The link says it is deprecated. I'm doing (jquery): $("#my_id").html("
more html
"); – user984003 May 30 '16 at 12:44
as I said, I would suggest you to use the Mutation observer instead of web events. Just giving you both the option I know we have. – pietro909 May 30 '16 at 12:46

score 1 · Answer 2 · answered May 30 '16 at 12:30

You should trigger the other event from the event listeners on the other actions. Basically you can have something like this

$(".button").click(function(){
// perform your actuibs and do some interesting stuffs
$(".anotherButton").click()
})

$(".anotherButton").click(function(){
// the other actions that needs to be performed after the first button clicked
})

Continue execution only after DOM manipulation has completed

2 Answers2