Как вставить в документ HTML с JS переменными?

Question

[BoriHagen]

Есть такой код:

var item;
						function addItemInOrder (button){
							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").innerHTML(itemResult);
}

Тут я получаю выведенные при помощи php блоки с данными о товаре и записываю каждый блок в переменную. Теперь нужно как то вставить эти переменные обернутые в другие html блоки в другую часть документа. Но консоль выводит ошибку document.querySelector(...).innerHTML is not a function

Answer 1

[Тигран Абрамян]

не правильно написан

document.querySelector(".main__order-items-wrapper").innerHTML(itemResult);

делайте так

document.querySelector(".main__order-items-wrapper").innerHTML = itemResult;

Comments

[BoriHagen]

Спасибо, но теперь возникла другая проблема, на месте где должна вставлять картинка появляется надпись [object HTMLImageElement]

[Евгений]

BoriHagen, попробуйте использовать insertAdjacentElement

[Тигран Абрамян]

BoriHagen, не знаю, не буду гадать вашу вторую ошибку, единственное что скажу поменяйте весь item.querySelector(...) на document.querySelector(...) хотя и не совсем ясно что у вас там происходит

[BoriHagen]

TAbrahamyan, Вот такой код:

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) ;

Как мне в itemResult правильно запись сделать чтобы он обрабатывал переменные

[BoriHagen]

TAbrahamyan,

Вот более подробно описал

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) ;// Вывожу все это в корзину
}

[Тигран Абрамян]

BoriHagen, нельзя добавлять html одной строкой как вы делали в переменной itemResult, да и вот вам рабочий пример, можете изучать и переписывать под себя, думаю проблема была в том что не взяли у каждого контента содержимое то есть вот так item.querySelector(".vendor-code").innerHTML

[BoriHagen]

Дело в том что мне не нужно брать inner HTML у той же картинки, ведь его просто нету, да и так же с заголовком, ценой и артикулом. Нужен именно сам тег с его атрибутами.

Answer 2

[tempick]

document.querySelector(...).innerHTML = {тут ваша переменная}
innerHTML - не функция, об этом и говорит интерпретатор. Нужно не скобки ставить, а знак "="