Why is JS not rendering content?

Question

JavaScript

Hello!

There was a need to add the HTML code (1) to the page in the DIV, then add the DIV code (2) to the inserted code (1).

Page:

<div id="block"></div>

Add like this:

(1)

document.getElementById('block').innerHTML = '<div id="button"></div>';

Then everything is inserted, I get the following:

<div id="block"><div id="button"></div></div>

Great, now we need to insert another div into the button. (Yes, a perversion, but very necessary).

(2)

document.getElementById('button').innerHTML = '<div id="button_2"></div>';

But it does not always work out, I understand that this is due to the fact that he sometimes does not have time to boot. Those. works time after time. I wrote a script:

(4)

var emptyQ = $('#button').is(':empty'); 
if (emptyQ == true) { timerQ = setInterval(function(){ выполнить (2); остановить таймер, если emtyQ false;}, 500); }

Everything works, but again through time. Stupidly it is not inserted on the page, and concole.log writes that emptyQ was inserted successfully, I display it through (3) and it really displays . BUT the page is empty. Why?

(3)
document.getElementById('button').innerHTML

It seems that JS has loaded new code into memory, and for some reason it does not always have time to insert it into the page.
Only the use of two code iterations (4) helps.
Thank you.

Answer 1

let button1 = document.createElement('div');
button1.id = 'button';
let button2 = document.createElement('div');
button2.id = 'button_2';
button1.appendChild(button2);
document.getElementById('block').appendChild(button1);