Как я могу добавлять элементы в DOM дерево?

Question

[Collonil Tolli]

У меня есть вот такая структура html:

<div class="GrandMuther">
            <div class="daughter"><img src="./img/image0.png" alt=""></div>
            <div class="daughter"><img src="./img/image1.png" alt=""></div>
            <div class="daughter"><img src="./img/image2.png" alt=""></div>
            <div class="daughter"><img src="./img/image3.png" alt=""></div>
</div>

Как я могу в элемент .GrandMuther Добавить дочерний элемент, который в свою очередь будет родителем для других дочерних элементов средствами чистого JS?

Вот что должно получиться:

<div class="GrandMuther">
    <div class="Muther">
        <div class="daughter"><img src="./img/image0.png" alt=""></div>
        <div class="daughter"><img src="./img/image1.png" alt=""></div>
        <div class="daughter"><img src="./img/image2.png" alt=""></div>
        <div class="daughter"><img src="./img/image3.png" alt=""></div>
    </div>
</div>

и могу ли я добавлять элементы в нужном мне порядке?
Например так:

<div class="GrandMuther">
    <div class="uncle"></div>
    <div class="Muther">
        <div class="daughter"><img src="./img/image0.png" alt=""></div>
        <div class="daughter"><img src="./img/image1.png" alt=""></div>
        <div class="daughter"><img src="./img/image2.png" alt=""></div>
        <div class="daughter"><img src="./img/image3.png" alt=""></div>
    </div>
    <div class="uncle2"></div>
</div>

Answer 1

[Сергей Соколов]

если элемент с классом "GrandMuther" всего 1, то так:

const sourceElement = document.querySelector('.GrandMuther');

// во что заворачивать
const wrapper = document.createElement('div');
wrapper.classList.add('Mother');

Array.from(sourceElement.children)
  .forEach(el => wrapper.appendChild(el));
sourceElement.appendChild(wrapper);

Comments

[Collonil Tolli]

Огромное человеческое спасибо!

Answer 2

[GrayHorse]

С помощью append, after, createElement.

https://learn.javascript.ru/modifying-document

querySelector также пригодится для уже существующих нод.

Comments

[Collonil Tolli]

а как мне добавить дочерний класс для GrandMuther, при этом чтобы он был родителем для всех daughter? по крайней мере в статье я не нашёл решения

[GrayHorse]

querySelectorAll и пихаешь их куда надо.