Как добавить новый элемент в два разных места JavaScript ES6

Question

Моя цель - добавить новый элемент в двух разных местах. У меня есть два div с идентификаторами div1 и div2. Я хочу добавить недавно созданный элемент span к обоим div.

document.querySelector('#div1').appendChild(span);

Это отлично работает, но проблема в этом

document.querySelector('#div2').appendChild(span);

Когда запускается второй appendChild, он удаляет диапазон из div1. Как добавить элемент span в оба места?

(Чтобы визуализировать выполнение, я добавил setTimeout)

const span = document.createElement('span');
span.appendChild(document.createTextNode('Test'));

document.querySelector('#div1').appendChild(span);
setTimeout(() => {
  document.querySelector('#div2').appendChild(span);
}, 3000)

#div1 {
  padding: 3px;
  background: red;
}

#div2 {
  padding: 3px;
  background: green;
}

<div id="div1"></div>
<div id="div2"></div>

Answer 1

Элемент DOM может быть только дочерним по отношению к одному и только другому элементу DOM. Вы добавляете созданный элемент span к первому элементу div, а затем добавляете его ко второму элементу. Здравый смысл таков, что промежуток затем удаляется из первого div и перемещается во второй. Вы можете достичь того, чего хотите, выполнив следующее.

const span = document.createElement('span');

    span.appendChild(document.createTextNode('Test'));
    document.querySelector('#div1').appendChild(span);
    setTimeout(() => {
      document.querySelector('#div2').appendChild(span.cloneNode(true));
    }, 3000);

#div1 {
  padding: 3px;
  background: red;
}

#div2 {
  padding: 3px;
  background: green;
}

<div id="div1"></div>
<div id="div2"></div>

Answer 2

Один элемент не может существовать в двух местах в DOM. Вы можете создать узел два раза или clone de node

    document.querySelector('#div1').appendChild(createSpan());
    setTimeout(() => {
       document.querySelector('#div2').appendChild(createSpan());
    }, 3000)

    function createSpan () {
      const span = document.createElement('span');
      span.appendChild(document.createTextNode('Test'));
      return span
    }

OR

    const span = createSpan();

    document.querySelector('#div1').appendChild(span);
    setTimeout(() => {
       document.querySelector('#div2').appendChild(span.cloneNode(true));
    }, 3000)

    function createSpan () {
      const span = document.createElement('span');
      span.appendChild(document.createTextNode('Test'));
      return span
    }

Answer 3

Используйте метод cloneNode для существующего диапазона:

Дополнительная информация:

https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode

const span = document.createElement('span');
span.appendChild(document.createTextNode('Test'));

document.querySelector('#div1').appendChild(span);
setTimeout(() => {
  document.querySelector('#div2').appendChild(span.cloneNode(true));
}, 3000)

#div1 {
  padding: 3px;
  background: red;
}

#div2 {
  padding: 3px;
  background: green;
}

<div id="div1"></div>
<div id="div2"></div>