javascript - Why does the elements inside my div container disappear?

Question

I have a question about browser behavior when handling the elements inside of a div container. I have an Iframe that I use to make requests to the server to run PHP files, while the parent page remains dynamic. Requests made by the parent page to the child frame determines what eventually happens to certain elements on the parent page when the server returns the results to the child frame. I've tested everything, and it all works fine, except for one noticeable glitch. If someone happens to call a function on the main page that tries to read an element inside of a div container while the child frame is making a change to any element inside the same div container, the program gives a null error. When I check the elements of the div container with the debugger, all of the elements (14 in total) inside that specific div container are gone. I'm sure I can solve the problem by querying a random element first to see if it exists, and if not, put a call back function a second later once the child frame finishes with the parent page. But I'm curious as to why all elements inside that specific div container are gone at that exact moment in the first place, since the child frame only manipulates 5 of the elements inside that div, and the parent request is looking for a completely different element that is not being manipulated by the child frame. Am I correct to assume that making changes to an element inside of a div container forces a rewrite of all the elements inside that div? All other div container elements in the body of the document remain intact, just the one div that's being changed. This is not the exact code (too much to post) but an example.

// Parent
document.getElementById("heading").innerHTML = "Where did you go?";

// Child Frame
parent.document.getElementById("pic").src = "anotherpic.jpg";

<div id ="something">
  <P id = "heading">blah blah blah</p>
  <img id = "pic" src = "picture.jpg">
  <p id = "picname">Picture Name</p>
</div>

question from:https://stackoverflow.com/questions/65893654/why-does-the-elements-inside-my-div-container-disappear

Answer 1

Please mind there is no such thing as "at the same time" here. Both, the innerHTML and getElementById work synchronously.

Even if you used the innerHTML improperly (which I know isn't the case) eg. overriding the parent component - there's no "in-between state" that you'd be able to access with the functions, to notice that there are no elements for a "moment". So I'd look elsewhere to find a reason behind it.

eg. the Iframe content modifies the parent twice every time, first of which makes it empty.