HTML template element

The <template> HTML element serves as a mechanism for holding HTML fragments, which can either be used later via JavaScript, generated immediately and inserted into a shadow DOM, or used as part of out-of-order patching with <template for=”…”>.

This element has no permitted content, because everything nested inside it in the HTML source does not actually become the children of the <template> element. The Node.childNodes property of the <template> element is always empty, and you can only access said nested content via the special content property. However, if you call Node.appendChild() or similar methods on the <template> element, then you would be inserting children into the <template> element itself, which is a violation of its content model and does not actually update the DocumentFragment returned by the content property.