innerHTML call returns before DOM is rendered in element

• Component: DOM
• Status: RESOLVED INVALID

[James Hartig]

After the innerHTML setting returns and moves on to the next command in JS, the DOM hasn't finished parsing the new HTML and the next call fails because the element it is looking for doesn't exist. The HTML is in the element it just hasn't been parsed yet by the DOM.

Example code (actual htmlString: http://pastebin.com/JUHYy9Yt)
element[0].innerHTML = htmlString;
console.log(document.getElementById('services_content')); //returns null
console.log(element[0].innerHTML); //prints the html in console though

If I wrap the next call in setTimeout with a timeout of 0 then it works:

element[0].innerHTML = htmlString;
setTimeout(function(){console.log(document.getElementById('services_content'));}, 0); //returns actual element

The innerHTML is <1900 chars so it is by no means something huge. The call after setting the html loads content into one of the divs and thus fails because the element doesn't exist yet.

[Alexey Proskuryakov]

Created attachment 108440 [details]
test case (doesn't reproduce)

I made a test from the bug description, and cannot reproduce this problem with Safari 5.1.

Could you please check what the difference with your code is, and/or attach your full test case?

[James Hartig]

Unfortunately this appears to be something up the call stack. I can reproduce the issue a million times but only if the call stack originates from a Facebook JS SDK function.