0

Почему новый элемент block аппендится во второй div? И исчезает из первого. Понимаю, что когда мы создаем элемент, по факту в DOM появляется новый обьект и в append приходит ссылка на этот обьект. Почему она тогда теряется, если мы повторно аппендим новый элемент в другой div? На один и тот-же обьект можно ссылаться из разных мест. Или это особенность append? Спасибо!

<div class="box-1"></div>
<div class="box-2"></div>

let block = document.createElement('div');
block.classList.add('new');

document.querySelector('.box-1').append(block);
document.querySelector('.box-2').append(block);

1 ответ 1

4

Так устроен append, он не копирует переданный элемент, а переносит его. В вашем примере блок сначала из dom переносится в box-1, потом оттуда переносится в box-2.

Чтобы в каждый блок вставить один элемент, нужно каждый раз создавать этот элемент. Для удобства, можно завернуть это в функцию.

first(".box-1").append( new_block() );
first(".box-2").append( new_block() );

function new_block() {
  // При каждом вызове создает и возвращает новый блок
  let block = document.createElement("div");
  block.className = "new";

  return block;
}

function first(selector) {
  return document.querySelector(selector);
}
.new {
  width: 60px;
  height: 60px;
  margin: 4px;
  background-color: #a22;
}
<div class="box-1"></div>
<div class="box-2"></div>

Существует еще метод cloneNode() для копирования элемента:

let block = document.createElement("div");
block.className = "new";

first(".box-1").append( block.cloneNode() );
first(".box-2").append( block.cloneNode() );


function first(selector) {
  return document.querySelector(selector);
}
.new {
  width: 60px;
  height: 60px;
  margin: 4px;
  background-color: #a22;
}
<div class="box-1"></div>
<div class="box-2"></div>

Ваш ответ

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

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