Как добавить клонированный элемент из DOM в JS. При добавлении элемента скопированного через el.cloneNode выдаётся ошибка

Question

При добавлении элемента скопированного через el.cloneNode выдаётся ошибка

Uncaught TypeError: Cannot read properties of null (reading 'appendChild')

Подскажите, как добавить клонированный элемент из Dom в JS.

function sendCard() {
    var news = document.getElementById('s1');
    var inprocess = document.getElementById('s2');
    var card = document.getElementById('btnsend').parentNode;
    if (card.parentNode == news) {
        var inprocess = document.getElementById('s2');
        var copycard = card.cloneNode(true);
        console.log(copycard);
        news.removeChild(card);
        inprocess.appendChild(copycard);
    } else {
        if (card.parentNode == inprocess) {
            inprocess.removeChild(card);
            var done = document.getElementById('s3');
            var copycard = card.cloneNode(true);
            console.log(copycard);
            done.appendChild(card);
        } else {
            var done = document.getElementById('s3');
            done.removeChild(card);
        }
    }
}

Answer 1

В связи с тем, что в вопросе не приведены разметка и стили в тестовом формате, нет возможности воспроизведения оригинальной ошибки.

Ошибка на скринах вопроса говорит что элемент которому Вы хотите добавить card равен null (в конкретном случае не ясно где 70 строка но там ошибка, либо тут:

inprocess.appendChild(copycard);

либо тут:

done.appendChild(card);

Я создал абстрактный пример клонирования кнопки с дивом - для демонстрации клонирования без ошибки, и ответа на основной вопрос:

как добавить клонированный элемент из DOM в JS. При добавлении элемента скопированного через el.cloneNode выдаётся ошибка

Несмотря на то, что клонирование глубокое обработчики событий в него не включаются, их нужно добавлять отдельно.

const div = document.querySelector('div')
const button = document.querySelector('button')

const cloning = ({target}) => {
  const child  = target.parentNode.cloneNode(true)
  child.addEventListener('click', cloning, false)
  document.body.appendChild(child)
}

button.addEventListener('click', cloning, false)

body {
 display: flex;
 flex-wrap: wrap;
}

div {
  padding: 5px;
  margin: 5px;
  background: orange;
  width: fit-content;
}

<div>
  <button>клонировать</button>
<div>

БЛОГ НА HUSL

Как добавить клонированный элемент из DOM в JS. При добавлении элемента скопированного через el.cloneNode выдаётся ошибка

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