При вставки значения в DOM получаю [object HTMLDivElement]

Хочу поменять местами значения в таблице. При переносе одного элемента в другой они должны поменяться местами.

 <div class="main__wrapper">
                <div class="main__cell">
                    <div id="1" class="card" draggable="true">
                        <div class="card__title">Title</div>
                        <div class="card__description">
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus, ipsa.
                        </div>
                        <div class="card__price">10$</div>
                        <button type="submit" class="card__button">Buy</button>
                    </div>
                </div>
                <div class="main__cell">
                    <div id="2" class="card" draggable="true">
                        <div class="card__title">Title</div>
                        <div class="card__description">
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus, ipsa.
                        </div>
                        <div class="card__price">10$</div>
                        <button type="submit" class="card__button">Buy</button>
                    </div>
                </div>
            </div>

Код в JS. Пытаюсь добавить элемент в функции - addInParent.

const dragAndDrop = () => {
  let card = document.querySelector(".card");
  let cells = document.querySelectorAll(".main__cell");
  let parent = undefined;

  function dragStart() {
    setTimeout(() => {
      this.classList.add("hide");
    }, 0);
    parent = this.parentNode;
  }
  function dragEnd() {
    this.classList.remove("hide");
  }
  function dragOver(event) {
    event.preventDefault();
  }
  function dragEnter() {
    this.classList.add("hovered");
  }
  function dragLeave() {
    this.classList.remove("hovered");
  }
  function dragDrop(event) {
    let b = document.elementFromPoint(event.clientX, event.clientY);
    let changeItem = b.parentNode.cloneNode(true);
    addInParent(changeItem);

    b.parentNode.remove();
    this.prepend(card);
  }

  function addInParent(item) {
    console.log(parent, item);
    parent.insertAdjacentText("afterbegin", item);
  }
  cells.forEach((cell) => {
    cell.addEventListener("dragover", dragOver);
    cell.addEventListener("dragenter", dragEnter);
    cell.addEventListener("dragleave", dragLeave);
    cell.addEventListener("drop", dragDrop);
  });
  card.addEventListener("dragstart", dragStart);
  card.addEventListener("dragend", dragEnd);
};
dragAndDrop();

введите сюда описание изображения

При попытке переместить один элемент в другой получаю данный результат:

введите сюда описание изображения


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

Автор решения: vsemozhebuty

parent.insertAdjacentText("afterbegin", item); — здесь вторым аргументом ожидается строка, а вы передаёте элемент, поэтому он и преобразовывается в строку. Может, вы имели в виду insertAdjacentElement?

→ Ссылка