0

Возникает ошибка при создании блока 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>

10
  • 1
    Приведи цельный пример кода, который не работает.
    – Grundy
    2 авг 2020 в 0:25
  • последняя строчка работает логично, потому что добавляется новый элемент. Какой элемент ты пытаешься добавить в document.querySelector('.firstContainer').append(div) - неизвестно. И из текущего кода - это не ясно
    – Grundy
    2 авг 2020 в 0:27
  • @Grundy Это и есть весь код, он состоит из body и 2 div: const div = document.createElement('div'); document.querySelector('#root').append(div) document.body.lastElementChild.classList.add('firstContainer') document.querySelector('.firstContainer').append(div) Это весь код, в котором возникает ошибка Я пометил тег js faq, потому что это основы DOM, но я просто не могу понять, почему из-за упрощения кода, у меня возникает ошибка 2 авг 2020 в 10:45
  • @Grundy но вот так document.querySelector('.firstContainer').append(document.createElement('div')) работает, хотя я переменной div упростил себе написание куска кода document.createElement('div') 2 авг 2020 в 10:48
  • это не весь код, очевидно. Во-первых, не хватает разметки, во-вторых, неизвестно что и когда вызывается. В любом случае даже в текущем виде ты не просто "переменной упростил" ты добавил две лишние строки. Если ты просто вынесешь в переменную - все продолжит работать
    – Grundy
    2 авг 2020 в 11:09

1 ответ 1

1

Основная проблема в коде не в том, что document.createElement('div'), а в том, что эта переменная используется дважды.

  1. добавляется в элемент с id="root"
  2. добавляется в элемент с 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.