Append нового элемента в разные блоки

Question

Почему новый элемент 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);

Answer 1

Так устроен 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>

БЛОГ НА HUSL

Append нового элемента в разные блоки

Ответы (1 шт):