Почему добавление в цикле работает через insertAdjacentHTML, но не работает через append?

Question

[kfedor]

Есть задача на сайте https://learn.javascript.ru/task/hide-message

У них добавление кнопки закрытия карточек происходит в цикле через insertAdjacentHTML и кнопка добавляется к каждой карточке, как и должно быть:

let panes = document.querySelectorAll('.pane')

    for(let pane of panes) {
      pane.insertAdjacentHTML("afterbegin", '<button class="remove-button">[x]</button>');
    }

Я попытался сделать через createElement и дальше в таком же цикле добавить каждой карточке элемент методом append, но получается так, что кнопка добавляется только к последней карточке:

let button = document.createElement('button');
    button.classList.add('remove-button');
    button.textContent = '[X]';

    let panesList = document.querySelectorAll('.pane');
    for (let pane of panesList) {
      pane.append(button);
    }

Почему так?

Answer 1

[Алексей Уколов]

получается так, что кнопка добавляется только к последней карточке

На самом деле нет, кнопка последовательно добавляется к каждой карточке. Но поскольку вы используете один и тот же элемент, а не создаёте в цикле отдельную кнопку для каждой карточки, она при каждой последующей вставке переносится на новое место и в итоге остаётся у последней карточки.

let panesList = document.querySelectorAll('.pane');
for (let pane of panesList) {
    let button = document.createElement('button');
    button.classList.add('remove-button');
    button.textContent = '[X]';

    pane.append(button);
}

Comments

[kfedor]

Блин, точно. Спасибо!