Currently I'm doing the following:
This is my HTML template
<template id="catDisplayTemplate">
<div class="col">
<img class="mehow" src="{{catImg}}" alt="" data-name="{{catName}}" data-id="{{catId}}">
<div class="row space-between">
<div class="col">
<p class="description">{{catDescription}}</p>
</div>
</div>
</div>
</template>
The following code change the moustaches but it feels like repeating itself
const catTemplate = document.querySelector('#catDisplayTemplate').innerHTML;
catTemplate = catTemplate.replace(/{{catImg}}/g, catData.img);
catTemplate = catTemplate.replace(/{{catName}}/g, catData.name);
catTemplate = catTemplate.replace(/{{catId}}/g, catData.id);
catTemplate = catTemplate.replace(/{{catDescription}}/g, catData.description);
*catData is the object with the details.
Is there a better/other way?