HTML Template Tag - HTML5 & JavaScript - Part 8

Learn how to use HTML template tag.
This tutorial is Part 8 from HTML & CSS Crash Course for a JavaScript Developer series.
• HTML Tutorial - HTML5 ...
#html #template #javascript

[@michaelmagill5466]

If you're pulling the data from a cell in a spreadsheet that only you have access to, you can also generate a new table within the spreadsheet using index/arrayformula across every cell and reformatting them with html syntax, and then just loop through those cells when you need them, for example if you're creating a table on your web app. I think it's better practice to do it this way but doing it the other way saves on processing time. Though I don't know by how much, only that it simplifies the loop code quite a bit.

[@fvgoya]

Man, this is a really good concept!! Of course template is not new. But the way that you made, was nice. To make even better, we can create a function and using something like something(“class-name”, “content”) or even passing an away. Anyway, good insights from this video. Thanks!!

[@cristianrosas8674]

Thanks dude, it really help me to understand :D

[@matusalemdamarin4060]

[@otom8872]

So helpful, thanks man!

[@kaushalnishad4823]

great job

[@cryptolicious3738]

cool video, how do u use regex to replace IDs in many parts of the html template like cartitemID with cartitem2 for example. this has been a unclear mess getting it as a string to run regexs n back to a element node i can then add to doc

[@ragtop63]

This is very interesting. I'm trying to figure out how to use this for dynamic content.
For instance, say I have a table with 5 headers. The content of each row is dynamic and does not exist until an action from the user is performed (a button click or something that initiates some JS that parses data from an external source (another website or something) and places its findings in an array of strings). That array is then used to create the contents of the table data (embedded in a element). Would using the element apply to this type of scenario?

[@amsoco]

You are very good! the way you explained this topic is much, much better than anyone else on the internet! Thank you very much

[@ohiwantyoutobelieve]

Very well explained, tyvm

[@nicolasbonilla2155]

can i use a template inside a template?

[@toma1610]

But who wants to repeat same content on one same page? I expected something like a navigation bar with a log which can be replicated all 150 pages and if i want to change something in the nav bar I just change one file or one line of code.

[@ExcelGoogleSheets]

You're confusing front-end web development with back-end (server-side) web development.
What you want is performed on server-side.

[@toma1610]

@@ExcelGoogleSheets Is there a way to perform what I want on the client side, with javascript? It must be... I guess...

[@kanhajain3028]

We can also use template strings in js to make that template code. It's just like writing the html code as a js string and changing the INNERHTML of any element to that string. I think it's more dynamic, as you can set ids dynamically and all at one place. ( template strings are strings written between back ticks ``)

[@ExcelGoogleSheets]

You could, but it's not the same. And it's questionable if it's more dynamic or not.

[@kanhajain3028]

@@ExcelGoogleSheets Yeah I was just telling you my way of doing the same. 😁✌

[@galamarciriebi4247]

thank u for all GOD bless u

[@najmantube]

A very clear explanation - thank you

[@pawandeore8291]

much needed

[@Nasir127sb]

best information

[@alirashid2679]

great tutorial!

[@ravemanlex]

Hi, is it possible to update the contents inside the template tag dynamically?

[@ExcelGoogleSheets]

It depends on your definition of "update". It returns a document fragment object developer.mozilla.org/en-US/docs/Web/API/DocumentFragment , which lives in memory and it can be inserted to the DOM. Once inserted the fragment will disappear.

[@B유]

so good

[@phoenixempire8886]

🙏🏻