HTML hat Templating über ein template
-Tag:
<template id="row">
<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('#row');
// 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 vor allem praktisch, wenn man schmal ohne irgendwelche UI-Frameworks arbeitet. Mehr auf MDN.