Почему js переменная выводится как объект?

Question

[BoriHagen]

Пытаюсь сделать добавление товара в корзину на сайте:

function addItemInOrder (button){// Сюда передается нажатая кнопка добавления товара вызовом функции в событии onclick="addItemInOrder(this)"
var item = button.closest(".main__categoties-wrapper__categorie-item");// Здесь я пролучаю ближайший родительский элемент кнопки
var itemImg = item.querySelector("img");// Получаю картинку, лежащую в блоке с кнопкой
var itemName = item.querySelector(".main__categoties-wrapper__categorie-item__tittle");// Получаю название товара, лежащее в блоке с кнопкой
var itemVendorCode = item.querySelector(".vendor-code");// Получаю артикул товара, лежащий в блоке с кнопкой
var itemPrice = item.querySelector(".item-price").innerText;// Получаю цену, лежащую в блоке с кнопкой
var itemResult = "<div class='order-item'><div class='order-item__data-left'><div class='order-item__data-left__img'>"+itemImg+"</div><div class='order-item__data-left__item-data'>${itemName}${itemVendorCode}</div></div><div class='order-item__data-right'><div class='order-item__data-right__delete-item'><button class='delete-item'>Удалить</button></div><div class='order-item__data-right__item-price'><h3>Цена: ${itemPrice}р</h3></div></div>";// Записываю нужную мне конструкцию для вставки в корзину
document.querySelector(".main__order-items-wrapper").insertAdjacentHTML("afterbegin", itemResult) ;// Вывожу все это в корзину
}

Когда я нажимаю на добавление товара в корзину, на место картинки подставляется не тег img с его атрибутами, а [object HTMLImageElement], и так же с заголовком, ценой и артикулом. Хотя если выводить например переменную в которой лежит тег с картинкой через console log то он прекрасно выводится в консоль.

Answer 1

[alexalexes]

Переменная itemImg у вас как объект DOMElement.
Его нельзя просто так вставить в строковое представление HTML.
Чтобы получить itemImg как HTML строку, нужно проделать такой кульбит с использованием контейнера:

var wrap = document.createElement('div'); //побочный контейнер для извлечения innerHTML
wrap.appendChild(itemImg.cloneNode(true)); // клонируем внутрь контейнера интересуемый элемент
var itemImgAsHTML = wrap.innerHTML; // извлекаем содержимое контейнера как HTML строку, то что вам и нужно.

Потом это примените тут:

var itemResult = "<div class='order-item'><div class='order-item__data-left'><div class='order-item__data-left__img'>"+itemImgAsHTML+"</div><div class='order-item__data-left__item-data'>${itemName}${itemVendorCode}</div></div><div class='order-item__data-right'><div class='order-item__data-right__delete-item'><button class='delete-item'>Удалить</button></div><div class='order-item__data-right__item-price'><h3>Цена: ${itemPrice}р</h3></div></div>";// Записываю нужную мне конструкцию для вставки в корзину

PS: Можно предельно сократить преобразование:

var itemResult = "<div class='order-item'><div class='order-item__data-left'><div class='order-item__data-left__img'>"+document.createElement('div').appendChild(itemImg.cloneNode(true)).innerHTML+"</div><div class='order-item__data-left__item-data'>${itemName}${itemVendorCode}</div></div><div class='order-item__data-right'><div class='order-item__data-right__delete-item'><button class='delete-item'>Удалить</button></div><div class='order-item__data-right__item-price'><h3>Цена: ${itemPrice}р</h3></div></div>";// Записываю нужную мне конструкцию для вставки в корзину

Comments

[BoriHagen]

Код все так же выводит его как текст

[BoriHagen]

Разобрался, спасибо)) Я вставлял результат в документ при помощи append() а на до было при помощи insertAdjacentHTML("afterBegin", itemResult)

Answer 2

[shsv382]

Попробуй .append() вместо .insertAdjacent

Comments

[BoriHagen]

Тогда выходит вот так