How to use HTML <Template> tag

Write your code block and wrap that up with template tag and name the id as you want.

That template block does not be shown on the page.

You can get the template block with querySelector. and you can manipulate and store for a kind of repetitive tasks.

With this tag, you can save yourself from a lot of efforts and do without template frameworks like React, Vue, and Svelte

Alternative way: not using cloneNode() method.

If you made an element using “template.content.cloneNode(true)”, You cannot access the under of the element as a normal HTML element. What you can see is the only “document-fragment”. and that has not child, childNodes.

But if you make a new element using “template.innerHTML” that will work as a normal HTML element.

manipulating template


Now, as you can see in the “toast.ts”, I’d made a new div and fill in with the template’s innerHTML. and for further manipulate, I’ve used the return value of the “appendChild” method.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store