Html template to javascript

I am working on a website that is very dyanmic, so in order to not create every element using javascript, I am using HTML templates.
I want to somehow convert the content of the template tag to a js file acting as a module, so my code can get a lot cleaner.
The solution I am using right now is this :

    const about_item_template = ()=>{ 
    let temp = document.createElement("template");
    temp.innerHTML = 
    `<div class="about-item" style="height: 280px;">
<div class="about-slide-image" style="text-align: center;height: 200px;display: flex;justify-content: center;">
    <img src="/uploads/13-image-a66c8e53-9bef-4dc6-a4f7-a0a566baf078.png" alt="image" style="max-height: 200px;width: auto">
</div>
<div class="about-text">
    <h3>text</h3>
</div>
</div>`;

return temp.content.cloneNode(true);
}

Basically i am just creating a function for each template I am using and just import the ones I need in a html file. For example, when a users visits cart.html, only the cart templates would be loaded and so on. But I think this solution is not so memory-friendly, because I am creating a document Element every time I call the function for a specific template. Does the document.createElement() affect the memory?
My question is if this solution is good (in terms of memory / optimisation). What other approach should I use?
P.S.: I would like a pure js solution, without libraries like jQuery or React.