Как сделать эту веб-архитектуру (div внутри div) только с использованием document.createElement в javascript

Question

У меня есть вопрос. Как я могу сделать эту архитектуру DOM, используя javascript document.createElement ()

<div class="load-wrapper">
 <div class="inner-load"></div>
 <div class="middle-load"></div>
 <div class="outer-load"></div>
</div>

Я знал, что мы можем использовать document.createElement("div") и document.addClassList("load-wrapper"), но я совершенно не уверен, как сделать архитектуру выше.

Если вы спросите, почему я хочу сделать это с помощью javascript, причина в том, что я хочу сделать загрузчик при vue монтировании, но с использованием js, так как мы используем microfrontend, это проще использовать таким же образом в js, вместо того, чтобы делать это с использованием нового компонента. Может кто-нибудь помочь мне решить эту проблему?

Answer 1

Вы не можете сделать это, используя только createElement . Вы можете использовать appendChild :

const wrapper = document.createElement('div');
wrapper.className = 'load-wrapper';
document.body.appendChild(wrapper);

const inner = document.createElement('div');
inner.className = 'inner-load';
wrapper.appendChild(inner);

const middle = document.createElement('div');
middle.className = 'middle-load';
wrapper.appendChild(middle);

const outer = document.createElement('div');
outer.className = 'outer-load';
wrapper.appendChild(outer);

или внутренний HTML:

const wrapper = document.createElement('div');
wrapper.className = 'load-wrapper';
wrapper.innerHTML = `
 <div class="inner-load"></div>
 <div class="middle-load"></div>
 <div class="outer-load"></div>
`;
document.body.appendChild(wrapper);