The new child element contains the parent. при создании блока div через const
Возникает ошибка при создании блока div. Первый блок div создался без проблем в body с id root, после я присвоил класс firstContainer, чтобы при помощи класса добавить div внутрь 1 блока div
const div = document.createElement('div');
document.querySelector('#root').append(div)
document.body.lastElementChild.classList.add('firstContainer')
Но, когда я хочу добавить внутрь таким образом:
document.querySelector('.firstContainer').append(div)
Возникает нелогичная мне, но логичная браузеру ошибка, что child содержит parent.
Ведь я просто упростил код const div ...//,
но вот так работает
document.querySelector('.firstContainer').append(document.createElement('div'))
const div = document.createElement('div');
document.querySelector('#root').append(div)
document.body.lastElementChild.classList.add('firstContainer');
document.querySelector('.firstContainer').append(div)<body id="root"></body>Ответы (1 шт):
Основная проблема в коде не в том, что document.createElement('div'), а в том, что эта переменная используется дважды.
- добавляется в элемент с
id="root" - добавляется в элемент с
class="firstContainer"
Однако, во втором случае элементом с class="firstContainer" является тот самый див, который хранится в переменной.
Из-за этого возникает парадокс: попытка добавить элемент, в самого себя.
И, как следствие, ошибка.
Для добавления нового элемент, нужно его просто создать перед добавлением.
Например:
const div = document.createElement('div');
document.querySelector('#root').append(div)
document.body.lastElementChild.classList.add('firstContainer');
var container = document.querySelector('.firstContainer');
console.log(container === div);
const div2 = document.createElement('div');
document.querySelector('.firstContainer').append(div2);.firstContainer {
width: 100px;
height: 100px;
border: 2px solid red;
}
.firstContainer>div {
border: 1px solid green;
width: 50px;
height: 50px;
}<body id="root"></body>