Почему игнорируется .append(elem)?

Question

[Gary_Ihar]

Нахожу два дива с className = user1 и user2:

const windowChatUser1 = document.querySelector(".user1"),
  windowChatUser2 = document.querySelector(".user2");

И пытаюсь в каждый добавить тег Р с текстом:

function render(message) {
  const p = document.createElement("p");
  p.textContent = message;
  windowChatUser1.append(p);
  windowChatUser2.append(p);
}

В таком случае срабатывает только "последний" аппенд и игнорируется предыдущий. Подскажите, почему так происходит?

Answer 1

[0xD34F]

Не игнорируется.

Встречный вопрос - как один элемент может находиться сразу в двух местах? Нет-нет, можете не отвечать. Очевидно же, что никак. Чтобы добавлять одинаковые элементы в разные места, делайте копии:

function render(message) {
  const p = document.createElement('p');
  p.textContent = message;
  windowChatUser1.append(p);
  windowChatUser2.append(p.cloneNode(true));
}

Или вместо создания элементов собирайте разметку:

function render(message) {
  const html = `<p>${message}</p>`;
  windowChatUser1.insertAdjacentHTML('beforeend', html);
  windowChatUser2.insertAdjacentHTML('beforeend', html);
}

Comments

[Gary_Ihar]

Спасибо! Живи долго и счатливо! :)

Answer 2

[Дмитрий Беляев]

function render(message) {
  const p = document.createElement("p"); // создали p, его еще нигде нет в DOM, все ok
  p.textContent = message;
  windowChatUser1.append(p); // поместили наш p в windowChatUser1, с этого момента он есть в DOM
  windowChatUser2.append(p); // переместили наш p в windowChatUser2
}

логично, что из windowChatUser1 наш p исчез при перемещении в windowChatUser2, так как один элемент не может быть в двух родителях сразу
Делайте глубокий клон при втором добавлении:windowChatUser2.append(p.cloneNode(true));

Comments

[Gary_Ihar]

Большое спасибо за комментарии с разъяснением !