Dobre praktyki VanillaJS

Cześć. Jak się ma do dobrych praktyk taki kod? Mam wątpliwość, że może nie jest to najlepsze rozwiązanie, ale z drugiej strony nie znam alternatywy dla tego rozwiązania oprócz użycia Reacta i składni JSX, których nie mogę użyć w tym kodzie.

const createProductCard = (amount, save) => {
    const productsList = document.querySelector('.products-list-section');
    // CREATING ELEMENTS
    const wrapper = document.createElement('div')
    const topDiv = document.createElement('div')
    const topDivFirstChild = document.createElement('div')
    const topDivFirstChildParagraph = document.createElement('p')
    const topDivImage = document.createElement('img')
    const topDivSecondChild = document.createElement('div')
    const topDivSecondChildDiv = document.createElement('div')
    const topDivSecondChildDiv2 = document.createElement('div')
    const image = document.createElement('img')
    const bottomDiv = document.createElement('div')
    const bottomDivFirstChild = document.createElement('div')
    const bottomDivSecondChild = document.createElement('div')
    const bottomDivThirdChild = document.createElement('div')
    // PLACING THEM IN RIGHT PLACE
    wrapper.appendChild(topDiv)
    topDiv.appendChild(topDivFirstChild)
    topDivFirstChild.appendChild(topDivImage)
    topDivFirstChild.appendChild(topDivFirstChildParagraph)
    topDiv.appendChild(topDivSecondChild)
    topDivSecondChild.appendChild(topDivSecondChildDiv)
    topDivSecondChild.appendChild(topDivSecondChildDiv2)
    wrapper.appendChild(image)
    wrapper.appendChild(bottomDiv)
    bottomDiv.appendChild(bottomDivFirstChild)
    bottomDiv.appendChild(bottomDivSecondChild)
    bottomDiv.appendChild(bottomDivThirdChild)
    // ADDING CLASSES AND ATTRIBUTES
    wrapper.setAttribute('class', 'product-card-wrapper')
    topDiv.setAttribute('class', 'product-card-top-section')
    bottomDiv.setAttribute('class', 'product-card-bottom-section')
    topDivImage.setAttribute('src', 'https://image.flaticon.com/icons/svg/626/626440.svg')
    // ADDING CONTENT INTO ELEMETNS
    topDivFirstChildParagraph.innerText = 'sztuk: ' + amount
    topDivSecondChildDiv.innerText = 'OSZCZEDZASZ: '
    topDivSecondChildDiv2.innerText =  save + 'zł'

    productsList.appendChild(wrapper)
}

const wrapper = document.createElement('div');
wrapper.innerHTML = `twój kod html w formie tekstowej`;
productsList.appendChild(wrapper);

Nie robisz w tym kodzie nic poza tworzeniem zwykłego HTML, w takim przypadku możesz użyć innerHTML.

Edit. podziwiam, że chciało Ci się to pisać w takiej formie heh, jednak współczuję programiście który miałby nanosić na tym zmiany.

Szczerze mówiąc prędzej pomyślałbym o czymś typu renderera HTML na podstawie konfiguracji w JSON. Większa szansa, że się przyda później oraz wprowadzenie zmian będzie łatwiejsze.

To jest napisane tragicznie. Nie widzę, żeby ten html był generowany warunkowo, więc równie dobrze można go umieścić w pliku html, a w JS tylko wstawić te dwie wartości dynamiczne. Aż się prosi o wykorzystanie jakiegoś narzędzia do dynamicznego generowania template np. mustache czy doT