Create HTML components with JS

main.js

define([
    'mage/template',
    'text!Magento_Theme/templates/product-card-template.html'
], function(
    mageTemplate,
    productCardTemplate
) {
    const productElement = document.getElementById('product-container');

    productElement && (productElement.innerHTML = mageTemplate(productCardTemplate, {
        id: 1568,
        name: 'Product name',
        image: 'product/image.png',
        price: '$9.99',
    }));
});

product-card-template.html

<!-- Magento_Theme/web/templates/product-card-template.html -->
<li class="product-item" data-id="<%- id %>">
    <div class="product-item-info">
        <% if (!!image) { %>
            <span class="product-item-photo">
                <img class="product-item-image" src="<%- image %>">
            </span>
        <% } %>

        <div class="product-item-details">
            <h3 class="product-item-name"><%- name %></h3>
            <span class="product-item-price"><%- price %></span>
         </div>
    </div>
 </li>