I want to add some options to an appendChild tag

I want to make a shopping basket for my website, and I used offcanvas for it. after making offcanvas page, I tried to append child ( appending some divs in my offcanvas page ) to my offcanvas. And then, I want to add my product details in my divs, after clicking on each product. for example, I click on first product, then my offcanvas would show a div and then, I want my div show’s the details of that product such as img, name and price.

But I have no idea how to append my details to my appended divs! I mean I can append my divs to my offcanvas but I have no idea about appending details on it. What should I do ? thank you.

this is my Code :

let list_pro = new Array();
let count = 0

function add_bas(t) {
  let imgs = t.parentNode.parentNode.children[0];
  let start_pro = imgs.src.search('img');
  let add_img = imgs.src.slice(start_pro, imgs.length);
  let name_pro = t.parentNode.parentNode.children[1].innerHTML;
  let price_pro = parseInt(t.parentNode.parentNode.children[5].innerHTML);
  let obj_pro = {
    'name': name_pro,
    'price': price_pro,
    'addres': add_img
  };
  list_pro.push(obj_pro)
  console.log(list_pro)


  // offcanvas
  let table_pro = document.createElement('div')
  table_pro.classList.add("tableCss");
  let listOff = document.getElementById('offcanvasBody');
  listOff.appendChild(table_pro);

  document.getElementById('pOFf').innerHTML = ''
}  
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 id="offcanvasRightLabel">Basket</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body" id="offcanvasBody">
    <P id="pOFf"> no product to show! </P>
  </div>
</div>