Почему в аналоге ToDoList новый элемент не добавляется, а заменяет старый?

Question

[Юрий]

Помогите, плиз!
Создаю список контактов по аналогии с ToDoList.
Вместо того, чтобы новый контакт добавлялся под прежним, он его заменяет (становится на его место).
Чего не так делаю, кто подскажет?
Код здесь: https://codepen.io/jurij-zibinskij/pen/wvzQBJb

Comments

[Анна Тимофеева]

Я не уверена, но возможно проблема в том, что querySelector выдает первый (и единственный) ul-элемент с искомым классом ('.contact-list'). Дальше вы создаете новый ul, но уже без класса, да и даже если создадите с этим классом, то querySelector опять же будет выдавать первый подходящий элемент в документе (и заменять его).

[Анна Тимофеева]

Анна Тимофеева, + да, я бы вместо innerHTML с append() сделала

Answer 1

[Чипекве]

Потому что contactList.innerHTML = заменяет все содержимое контейнера.

let contactList = document.querySelector('.contact-list');
let newContact = document.createElement('div'); 
newContact.innerHTML = `...`

contactList.insertAdjacentElement('beforeEnd', newContact);

Ну и стили починить нужно, чтобы flex не на контейнере, на записи был.

Comments

[Юрий]

Да, я понял, все заработало. Спасибо огромное )))