Using HTML5 Templates

While it is possible to write JavaScript that will dynamically create any HTML you want, the more HTML you need, the more JavaScript you have to write.
Why not use HTML and clone it?
HTML5 introduces a template element that will let you write your HTML in a way that is hidden on the page and then you can clone and paste it anywhere you want.

[alexdith]

Man your explanation is perfect.. Really got me into this, while i was lost about the template usage. Thanks Steve :D

[DjwiLLY]

Hi! Great tutorial ! But, you have a minor mistake, you don't respect the html structure where the second paragraph is below the template :)) that is because you used "appendChild", you should've used "document.body.insertBefore(content, bottomParagraph)" ( that I learned still thanks to you ) :D

[shang_lu]

Thanks for the great video Steve! Just one question here... I understand that we use document fragment to avoid using appendChild() too many times in a loop, which adds new content to DOM one at a time (bad approach). However, if instead, we use template, in the video it looks like we are still adding new cloned templates to DOM one at a time. Doesn't it lead to the same performance issues?
I'm pretty sure it does not since you recommended it, but what's the mechanism behind it? Do we get away with the performance issues just because we are using Templates?

[EpicphoneGamer]

Thank you!

I have a question: How Do i grab the clone with an unique ID, so that I can change the text e.g. only in the second clone?

[andre.unsal.]

I'd be curious to see edge cases where incorrect use of cloneNode(true) along with poor formatting of a template can result in recursively cloning elements

[matrixplace]

Would've been nice if you have shown how to populate the template with data coming from the JS.

[yakir]

you can do the same using template literals in 1 line:

class="box"><h2 class="temp"> ${myVar1} </h2><p> ${myVar2} </P></div>`;

your dynamic content will be myVar1 and myVar2 in this case

[TheVertical]

thanks for this easy explanation!
but how can i remove the contents from a template again?
Example: button for on and a button for off. when on it shows, when off it removes

[GnHck]

Hi Steve! Thank you for this video. I found some people don't like using JavaScript to add reusable elements like Headers and Footers. Nowadays, is this still a good method or there is a new way to implement it not using PHP?

[abdiag]

Hey Steve. I wanted to use a HTML template to generate dynamic input elements in a form. However it seems impossible since am getting the data from php json encoded method on the back end. What would you advice? Any similar tutorial? Link maybe? Thank you

[bharath]

Does this mean that any script or any static assets inside the template tag will be loaded only when we append the template to the body? If yes that's so powerful.

[toma]

It‘ easier to just copy and paste all tag with <template>, no? I don‘t see in you r video how can you generate a dynamic content. I mean, how do you do if you want to make a logo header to be reapeted in all pages of a site like yo do in php include?

[faisalalmalki]

really you have nice voice man you should use this talent