Create Your Receipt HTML Template for Building Services Easily

Receipt html template for Building services

part of the new features in html5 is the ability to create templates within your HTML that can be used on the page so if you have common elements that you are creating over and over and over again and you don't want to have to write multiple lines of JavaScript to reproduce those there's actually a template tag that we can use now here inside my HTML file we can see right here I have a template tag inside of which there's a piece of HTML here that I want to dynamically create now by default this isn't going to run this isn't going to appear on the page so I'm just going to kill my event here so none of my code will actually run and open up the page there so I'm not seeing that content here's my h1 tag and I've got two paragraphs one above that template element one below it nothing is showing up inside of here now the default when you are working with JavaScript and you want to create this I'm reactivating my Dom content loaded event here I'm going to check to see if supports template works the way we do that is we try to create a template element and then we look inside that for something called content if there's a property called content inside of your newly created template then you know you're good to go I'm going to change that to something that doesn't exist just so this fails my call to supports template right here this is going to fail and I'm going to get the else method running and I can tell that the else method is running because I will see this inside of my comments all right so the old method using just JavaScript instead of defining my HTML like this what I had to do was create a document fragment create a div coordinator to create a paragraph put the text inside the h2 but the text inside the paragraph assigned the CSS class name to my do this on the CSS class name to my h2 put the div inside my document fragment put the h2 inside my div and then put the paragraph inside the div and then append my document fragment to the page jump back the browser refresh this the else is running I get my content okay that works but that's kind of the fallback now you don't have to write that many lines of JavaScript to create this content now you could put this all together as a string and append it using inner HTML but that was also a little bit messy this is a nice simple way of creating an interface HTML is designed to be used for creating interface parts this is my interface template with a div and the stuff that's inside my template this is the content everything that's inside of here that is the content property and it will all be wrapped inside of a document fragment I don't have to create I don't have to say anything else so change this back to content in my function so now this part's going to work so we'll say templates are supported come back refresh my page templates are supported great now don't have the content here but instead of writing all this code what I can do now is I can get the template that's on my page so let's say look to temp equal document.getelementbyid d and the one I want I think is called my template alleged Olczyk yeah my template that's the ID that I want now my content be the content property of the template that's what we are checking for here was the content property so I go grab the template and I ask for the content that will actually be a document fragment console content there we go there it is document fragment inside of which there's the div there's the H - there's the paragraph so I want to append this to my page just like I did here and instead of the DF it's the content the content is my document fragment I mean we can use the same variable here DF but because it's let I don't want to use the same variable multiple times on the same page and there it is there's the content so I was able to write the content that I wanted to create in my HTML I wrapped it inside of a template tag so that it was hidden and it wouldn't show up to the user then inside here three lines of code I got the template I grabbed its content and I appended it and I mean technically you could do this all as one line if I wanted to instead of content we could say document.getelementbyid e my templates dot content so this would do the exact same thing everywhere now you'll notice even though that I have this written twice it's only appearing once on my page I'm not getting any errors and that's because of the way that appendchild works appendchild takes an object and sticks it on the page if you then reference the same object again and say stick it on the page it will take it from its old location and stick it into its new location well the location is the exact same place so I'm not seeing anything happen but it is actually doing the append twice it's just picking up this document fragment and then pasting it on again if you want to use the template multiple times over and over again instead of just the content you actually will need to clone that and there is a clone node method I have another video about this and you say I want to clone it I want to clone everything that's inside of it I don't want just the template I want the content inside of it and I want a copy of that so that when I run this there we go here's one copy here's another copy I still don't see the original template on my page it's hidden from sight it is in the HTML if you go into the elements you will be able to find it right here there is the template with the document fragment inside this is hidden from the user they just see it's a document fragment but we can clone that and paste it on there as many times as we want so I just duplicate that again and again and again oh actually sorry that's not gonna work this time I cloned it this time I took the actual object and put it inside there so we need to add this to the end so every time you clone you're taking a copy there we are copy copy copy copy copy so that's it get the template clunk get the content clone it and then you can append that copy if you want another copy clone it again and just keep repeating that process just to make this a little bit easier to read what I'm gonna do is I'm going to shorten this because I do have a variable content which is a copy and I'm gonna copy the copy this will be a little bit more readable in the final version here that I give to you guys on github as a code gist and we are okay that's there we go do that content and there better so we don't want to do a copy of a copy we'll take the content put it in and we'll clone it each time that we're going to put it onto the page alright and that's it that's how to use two inputs in html5 the html5 template tag check to say see that there is a content property inside when you create a template element if you can do that it means it's supported if it's supported grab your template get its content and clone it each time you're going to copy it and put it on the page as always thanks for watching