Ein Blog

HTML hat Templating über ein template-Tag:

<template id="productrow">
	<tr>
		<td class="record"></td>
		<td></td>
	</tr>
</template>

So kann man komplexere DOM-Teile konstruieren, ohne sich in document.createElement() und .appendChild() zu verlieren. Beispiel aus MDN zu dem Template oben:

const template = document.querySelector('#productrow');

// Clone the new row and insert it into the table
const clone = template.content.firstElementChild.cloneNode(true /* true for deep clone */);
const tds = clone.querySelectorAll("td");
tds[0].textContent = "1235646565";
tds[1].textContent = "Stuff";
tbody.appendChild(clone);

Ist vorallem praktisch, wenn man schmal ohne irgendwelche UI-Frameworks arbeitet. Mehr auf MDN.