Почему JS не выводит содержимое?

Question

[Ayk72]

Здравствуйте!

Возникла необходимость добавить на страницу в DIV HTML код (1), затем во вставленный код (1) добавить в его DIV код (2).

Страница:

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

Добавляю так:

(1)

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

Затем все вставляется, получаю следующее:

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

Отлично, теперь надо вставить в button еще один div. (Да, извращение но очень надо).

(2)

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

Но получается не всегда, я так понял что это из-за того, что он не успевает иногда загрузиться. Т.е. работает раз через раз. Я написал скрипт:

(4)

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

Все работает, но снова через раз. Тупо не вставляется на странице, а concole.log пишет, что emptyQ вставлен успешно, вывожу его через (3) и он правда выводит . НО на странице пусто. Почему?

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

Такое ощущение, что JS в память загрузило новый код, а вставить на страницу, по какой-то причине, не всегда успевает.
Помогает лишь использование двух итераций кода (4).
Спасибо.

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);