3 EASY Ways To Generate HTML with JavaScript for Beginners

hey guys how you going my name is dom and today i'm going to be showing you how to generate html using javascript code okay so these techniques right here are perfect for building user interfaces dynamically using javascript or just simply doing any sort of html work within your javascript code now also keep in mind that there are many different ways out there to achieve this i'm going to be showing you these three today because one i use them myself and two these three are probably some of the most popular ways that people tend to you know generate html okay so i'm going to run through each one here quickly before moving on to showing you each one in depth so the first one is building html element objects and appending them to some sort of parent element okay so this one here is arguably the most efficient out of the bunch now i say arguably because there's a bunch of research and articles online of people testing the performance and speed of this compared to things like in html but ultimately at the end of the day just use something that works for you and only worry about performance when it matters so if you're doing a performance critical application then yes consider these performance issues but if not just do what works best for you so the key benefit of this sort of technique is going to be easy access to the object straight away so you can easily add your event listeners your classes your attributes and things like that the second technique is using the good old classic inner html i'm sure most of you guys know this already if not basically you're just inserting html using a string okay and lastly we have the insert adjacent html this one here is one of my favorites and i also believe that not many people know about this so it's actually very similar to inner html but it's more powerful in that you can actually decide where your html goes relative to a element that already exists okay so this one here is super powerful and it sort of makes up for some of the disadvantages of using inner html and lastly just a side note template strings are our friend okay so javascript template strings allow you to insert things like variables or just basic expressions inside your string generation that way you can easily basically build html strings and i'm going to see that very shortly so for now let's have a look at the first technique building your html element objects and appending them okay so this first technique here involves creating a html element object in the javascript and then appending it to an existing parent element on the page okay so as an example right here with my overview text we're going to be adding a new list item to this list right here using this technique okay so i've actually gone inside the javascript here and i've already created a new constant called ul and this simply refers to the unordered list on my page which has the class of dc dash overview so going inside the html we can see i've got that ul right here and that is simply just all of the text which you just saw in the browser okay so we've got a reference to the parent unordered list right here so how do we go about adding a new list item to that existing list well we can make a new constant here called new list item equal to document.createelement and then we can pass through here li so basically what this new list item now is it's basically just one of these so we've simply created a new ally tag in the javascript and called it new list item you can pass through whatever tag you want inside this creates elements method and it's going to work the same way okay so now we've got this ally let's add some text to it okay so down here we can just say new list item dot text content is going to be equal to i am a new uh list item tag something like that right cool so now we've got something like this where we've got the ally and it says right inside here i am a new list item tag just like this now one of the main benefits of using this technique is you're able to easily do things directly on the object okay so for example i can now say new list item dot ad event listener i can add my click event on here if i wanted to particularly helpful with buttons okay for example i can also say something like class list is going to be you know dot add and i can say something like decode to simply add the decode class to my list item so it will turn into something like this where it says class then decode so we can see here this is the main benefit of using you know this technique of creating the element directly okay so now in order to append the list item to the page itself because currently all of this stuff is happening in the javascript only so to actually get the new list item on the page itself we have to simply say ul dot append child then pass through here new list item so basically we're appending this new child element to the existing ul so now if i save this go back in the browser and refresh we have this new ally on the page so of course if i inspect this we've got the ally with the class of d code and it's all working perfectly fine so that is your first technique right there i encourage you to do things like new list item dot and just have a look at all of the different properties and methods you've got you've got access to here and this right here is really the main benefit of using this technique you can easily access these properties and methods okay that is your first technique right there okay so moving on to the second technique here using the inner html property okay so i'm sure many of you guys have used this property before if you haven't don't worry i'm still going to show you okay now i'm going to be demonstrating two examples of this property the first one is going to be modifying the existing html on an html element okay and that is probably the most common use case for this property right here and the second example is going to be adding a new list item to that list which i just showed you with the first technique so we're going to be exploring that across all three but first let's modify some html using this property right here so going back to the unordered list right here on the web page we're going to be using in html to modify the html of the second list item right here so to achieve that basically we need to have access to the second ally right here in the javascript code okay so going inside the javascript right here we're going to make a second constant called existing sorry existing list item equal to document.query document.queryselector.org we're going to simply select dc-overview then just say get me every single direct descendant that is an ally of our ul element right there then pass through brackets and just say one to simply get the second ally inside the list okay so we now have the existing list item in the javascript so it's going to be as simple as just saying existing list item dot inner html is going to be equal to something like this where we just say strong then say something like i have been modified something like that okay so remember with the inner html property if you have an existing ally just like this essentially the inner html is everything inside the tag so you're not modifying the ally part only the inner html of your existing element so if i save this go back in the browser refresh we have the i have been modified on that second element right there so that is your basics of the inner html property now i want to quickly touch on the template strings before moving on to adding a new list item so with this whole template string thing i mentioned earlier if i go back inside here if i want to have some sort of expression or variable as part of my string here so for example if i say you've visited something like 56 times okay so just pretend this right here is just some sort of like you know hits counter or some sort of like visitor counter for a website this 56 is most likely going to come from a variable or some sort of expression so you could do you could have your double quotes here and just say something like plus then just say num visits and then have the num visits in a constant for example something like this and if i save this code back in the browser this works right so you have the 56 inside there using the plus to concatenate your string okay but you could also use template strings okay so going inside here let's change these double quotes to be the back tick near the one on your keyboard okay just like this right so now using these back ticks we now have access to two things the first thing is multi-line strings i'm going to show you that shortly but the second thing is going to be the ability to directly insert expressions so inside here we can just say for example using a dollar sign then curly braces we can pass through num visits to simply inject that 5 6 from here inside the string so save this back in the browser refresh and we have the same result 5 6 right there but this time it's a little bit cleaner and easier to read okay now you can also have multi-line strings here for example i can actually drop down and make this a little bit you know i guess you could say clearer or a bit more structured right so you can use multi-line strings right here by using the template string so this is why i encourage you if you are using inner html or the next technique i'm going to show you um definitely try to use these template strings to give yourself a bit of a easier development experience okay so anyway let's have a look now at appending a new list item to the existing ul using the inner html property so to achieve that to add a new list item okay we need to change this code here to instead target the existing ul so going back inside here of course we have all of this existing allies as a you know as direct descendants of the dc overview we need to basically just append some new html to the existing html okay so to achieve that let's say ul dot in html instead so targeting the html of the parent if i do this right if i just keep it like that with an equals go back in the browser refresh we lose everything okay it's simply set a strong inside the ul okay so to fix this we simply say plus equals to append to the existing inner html okay then of course add your ally because now you're focusing on you know the actual ally itself and not the contents of the ally so we need to basically just append a new list item to the existing inner html save this back in the browser refresh and now it's on the bottom here instead okay so that is how to use inner html to add a new element or some new html to your existing sorry to your existing uh you know unordered list okay so that is your inner html property right there but this technique right here it does work but you can actually do it in a bit more a bit more of an elegant way by using the next technique which i'm going to show you right now all right so lastly we have the insert adjacent html method okay so this technique here is you know it's it's very similar to inner html but it is much more powerful when you want to add html compared to when you want to modify okay so this one here is perfect for adding a new list item to the list right here using html string okay so going back inside here when it comes to the insert adjacent html method okay we need to essentially start on the ul okay so we need to say ul dot insert adjacent html so starting on the parent right here we need to say inside these brackets here the first argument to this method right here is going to be the insert position so you've got four options when it comes to adding your html after begin after end before begin and before end so this right here is simply saying where do you want your html string to end up okay do you want it after your ul begins or after it ends join it before it begins or before it ends so if you want to append a new some new html you would use before end because you want to insert stuff before the end of your ul if you want to insert html before the beginning of your ul you would use before begin and then so on so let's use before end in this scenario okay then as a second argument we've got to provide the html so for example we can just say something like li inside here ally something like i am new save this back in the browser refresh and now we can see if we inspect the ul we've inserted a new ally list item before the end of the ul that is what this positioning is for let's change this to be after begin after the ul begins insert this html so of course this one refresh it's going to be after it begins so of course after it begins let's change this to be before begin okay so now let's just change this to be something like strong outside of lists okay save this back in the browser refresh and now we can see we've got the strong tag outside or before the beginning of the ul so this is why the insert address in html method is powerful it doesn't entirely replace inner html because obviously you need to still be able to modify existing html in place so this is mainly for when you want to insert html instead of modifying it okay so and that is your insert address and html method right there it's also worth noting that you can do the exact same thing for different uh for different use cases okay so you can say here insert adjacent element okay then instead of putting a string here you would put your list item object which i showed you in the first technique okay so you can also experiment with that or you can say insert adjacent text and you can do the same thing but this time it's text only which means i can say for example before it begins i can say strong hello right but because it's just text you won't get the strong html interpreted by the browser so if i save this you go back in the browser refresh we have the actual html being you know displayed as opposed to actually working so um you have those three methods right there obviously we focused on the insert adjacent html okay so that is your third technique right there and that is three techniques for generating html using javascript if today's video helped you out drop a like and subscribe and i'll see you guys in the next video

Channel: dcode

Views: 4,586

Keywords: html js tutorial, html js web development tutorial, build html strings with javascript, html strings in javascript, append html with javascript, appendchild javascript, html elements dom tutorial javascript, add html with javascript tutorial, edit html elements with javascript, how to build user interfaces with javascript and html, dynamically generate html with javascript, dynamically build html with javascript tutorial, how to create html elements in javascript

Id: bhHa6AL4aBo

Length: 17min 16sec (1036 seconds)

Published: Thu Aug 19 2021