Generating elements and Text node in DOM

are you excited because I am very much let's go ahead and try to do all of this through JavaScript it's gonna be so much fun and so much to learn about creating elements appending the elements creating the text nodes and a whole bunch of thing which is super useful so without wasting any more time first hit that subscribe and then you can continue to watch I know you are still watching it you haven't hit that subscribe I'm pretty sure you will do it okay first and foremost what we're gonna do is we're gonna create a simple array I'm gonna call that as courses a general recommendation call your arrays always as plural it's a good idea but nobody's gonna blame you if you don't but it's a good idea now I do have this array I'm gonna hit an enter and this array is gonna be an array of objects so just like this this is an easier representation for understanding the things now I will just delete that again and now I'll hit an enter again our object is gonna have two properties the first one is gonna be the name which is in this case gonna be a let's just say complete react j/s course maybe this should be lower there we go so that's the first property we'll have another property which is going to be price and price is gonna be in dollars so react courses I think 2.2 or 2.3 dollars don't remember exactly and now we're gonna just go ahead and do a copy and pasting of it so copy and feel free to paste it as many times as you like I'll go for for just for no good reason and we're gonna say this one is complete angular and make sure you change the pricing a little bit my courses are exactly like 199 rupees for everyone but go ahead and change it we want to do something a bit manipulative to them so this one is gonna be complete myrn course this one is gonna be complete c++ course let's just go for this as 2.3 did we used yep we have used 2.3 about 2.7 already 2.8 yeah there we go so make sure the pricing is different for all of them this is the most important thing now comes up the interesting part is we want to loop through these courses how are you gonna loop through the array we have seen a whole lot of methods of looping through any of the airway this is nothing extraordinary feel free to use classic for Lou but in my case I generally tends to prefer the method which are associated with the airway itself let's go ahead and do that inside a function we know how to divide how to design a function I'm gonna call this one as generate list feel free to call it anything and just for showing a purpose or later on I'm gonna just call it directly as well so as soon as this script runs this is gonna be called up now how we are gonna loop through it we're gonna simply go ahead and say courses dot and I'm gonna use a for each there we go for each allows you to have a simple callback so in every single callback you're gonna get an access to every single element which we are gonna call as course and there we go we're using an arrow function to have it pretty basic and nothing extraordinary so far okay but before that let me show you one more interesting thing that inside this unordered list we need to generate a whole lot of list item so there are two challenges in front of us first is I need to grab this unordered list which is super simple I can do that in an instance I can come inside the method I can say Const and unordered list there we go and I can grab you by simply saying document dot query selector and by providing the class here come on there we go what is the class name that you got you got the class name of Lists group so I can grab you okay there we go so one problem is solved as of now another problem is I have to first construct this list item and then somehow inject this list item inside this unordered list so first let's worry about one thing which is how can I construct this list item I have to create an element this is list item then part two is gonna be how can I inject this class here third thing is how can I inject a node here which is simply text then further I have to create another element which is having the same things an element a class and the text node and then I have to inject to spend inside the list item once I get the knowledge of how can I inject this span inside the list item based on the similar knowledge I can inject the entire list item inside this unordered list and since I know loops I can do it again and again I know this is too much of the word but it's important so rewind it watch it again this is important stuff okay let's go and come back here inside the loop itself and first and foremost let's go ahead and create a list item how do we create it so far we have seen we can only grab it using get element by ID or query selector but if you'll notice closely oops if you notice closely if I just select the document I get an option of create element as soon as you mark this as create element it creates something like this for you just showing you an example these guys and these guys this is what it creates for you and once you come up and say that I want to create probably a P tag then it inserts exactly the P tag up here for you like this but in case you say that I want to add a list item it's gonna just create a list item for you so this is what is happening behind the scene so I say list item and this is being generated for me now the next thing for me is to add a class into that so I need to add a class like this and inside the class I have to mark this as list group item copy that and this is what I need to do next so that is also not really tough actually I can do this I can simply go ahead and reference this list item and I can say I want to add a class list remember I told you class is always a list there are a lot of classes that you insert so I'm gonna say just add the class list and class list has a lot of properties you can definitely say add but you can say remove you can say a toggle maybe you want to do something like this but right now add is gonna serve my purpose so there we go I add this so up till now this is being created for me but is it useful for me not really that much now the next thing that I want to do is inside this list item notice here we got this JavaScript course to be inserted this is called as texture node so I need to create a I need to create a text node from this object name which is in the array and I have to inject it up here so how can I do this I'm gonna go up here a little bit okay and now let's go ahead and call this one as name how we're gonna create the name again we're gonna simply say document this time not we are not creating an element so we're gonna simply say create text node that's why I told you remembering these name is important so how are you gonna grab the name I can grab the name since I already have the access of course which is looping through every single element I can go ahead and say course dot name so this name is gonna be repeated let's just say this time we grab any of the name so this is gonna be copied and it's gonna be injected right here but it's not yet injected we only got a reference of it we need to add it now so how do we do this it's really simple we simply go ahead and say that hey list item I want to append a child onto you and what is that child really simple that child is this name so there we go right now we are into this position okay great so far now further we want to just hit an enter probably if you want and we want to add as span here something like this span now again remember this a span is with the pointy things so we have to do almost these things again so let's go ahead and do this it should be really really simple very I simply say I'm gonna call you span and dark you meant dot create element what is the element that you want to create is gonna be span is it just the element that you want to create span or you want to add some classes to it yep there is a class which is float right so I want to do that too let's go ahead and add this so let's take this span and we're gonna simply say add no not add we're gonna add class here so class list dot add there we go what is the class name I want to add this so so far we in a situation where we are having this class as equals to like this no like this now do you want to add something inside this one yes I want to add it further so I'll be doing almost like this I will be calling it up so Const let's call it as price from where you're gonna get the price first I need to create a text node so I'm gonna call document document dot create text node this time and what is the text node it's coming up from course dot price so same course is gonna give me the name and same course is gonna give me the price but is it available now not yet we need to actually append this price as well where do you want to append it I'm gonna simply call the span and I'm gonna say append append child what is the child that you want to append is gonna be price so now price is also being inserted so let's just say the same price which is 2.8 is inserted and there we go do you want to insert it like this no I would like to add a dollar sign here as well so let's use the knowledge of simple from console dot log almost same we're gonna add a simple string here which is gonna be dollar or any other sign I'll add a space and then a comma or we can use a plus sign to let's use the plus sign that's better actually in this case and there we go now we have got this dollar sign and a space and two point eight dollars okay so this entire list element is created but right now nobody has actually injected this list item inside this unordered list but since we have knowledge we have done it multiple times here we can actually go ahead and do this this shouldn't be really that much of a big deal okay so first and foremost uh let's go ahead and did we injected the span no we have actually created the entire span but nobody has actually injected this is span inside the list item right now our span is empty it's just having a name this was created as as a standalone so this is almost something like outside we have generated it outside almost like but nobody right now has injected this entire span there should be one this entirety of the span with the pricing inside this list item so let's go ahead and do that okay it should be fairly simple hey list item I want to append a child and that child is gonna be span so there we go span is injected now the entire list item is already so for that I can go ahead and ask hey unordered list which if you forgot we got a reference up here so hey unordered list I will just go ahead and would like to do an append child to you and that entire child is list item so there we go nice and easy now what we are doing is first and foremost we are cutting this out and we are injecting it up here and then we are cutting whole of this out and we are injecting it as another unordered list I'll just comment this out this was just to show you it's much more easier now notice here since I have actually directly called this generate list up here it should be up and running already so since my browser is already up and running there we go we got this JavaScript course which was hard-coded and we got this complete react in all of this but there is an issue if I go ahead and run this notice here I'm every single time running this method now yes this is 100% true you don't have to worry about anything you are running this method as soon as this file loads but in many of the cases people don't do this they would like that whenever my page actually loads then I want to do it surely this means exactly same in this case but just wanted to show you we have a window object we have talked about it and window has a lot of methods given to you but remember in the previous video we were able to add an event listener on button on list onmouseover pretty much anything similarly on the window object you can add an event listener and there is no shortage of events up here first and foremost you can look for the event in this case you can just load look for the event which is load and then you have to pass on what method should I run notice we don't pass it method like this because we don't want to run it that running part is automatic be done by eventlistener we just pass on a reference of it and with this so this is also gonna do and generate the same effect if I hit a reload we saw no problem so technically this line of code and this line of code is exactly same feel free to go however you like to go no problem in this case okay now we're gonna do one more thing which is actually a bit more fun and is going to introduce some of the issues for us what I want to do is I want to click on this sort courses and as soon as I sort courses the courses should be sorted according to their pricing let's go ahead and see how this is gonna create some of the issues for us so it's pretty simple we can actually look for the button which already has a got a class of sort a BTN we can pick up any of these classes since we have just one button but I have injected a sort BTN class inspired by bootstrap just directly here we can actually design the method for it so let's go ahead and do that we're gonna simply say hey Const I want to get an axis of button how can I do that it says hey that simple you can just say document dot query selector there we go and you can provide me the class name which you are looking for I say there we go so now I got a reference of it now on this button I can add an event listener and then I can look for certain events that should happen in this case for the button majority of the time it makes sense if you look for and click event surely you can go for mouse enter or something up to you your project and then we can either pass on a method or we can fire up something known as callback just like this we're gonna use the callback in this case surely you can go ahead and define a method just like we did above that's fine at - now what I want to do is when as soon as this event listener kicks in I want to reference to this array and these array has a lot of things one of them is actually the sort method again I highly recommend to look for the documentation of this sort because it can be a little bit confusing again the sort method is gonna go like this and an arrow function just like this it expects you to have - values let's just say the a and B which are comparable values and based on the operation it gives you either descending on descending however you are using so we are gonna simply say that a dot price so based on the price we are comparing so whatever the object you are giving in we are just comparing based on that so we are simply saying a dot price is gonna be subtracted by B dot price not - B dot price okay so based on this the sorting is gonna happen now again the reason why I am saying a dot price because as soon as I say courses dot sort the sort is going to go ahead and look for every single object a is considered as an object so this means this entirety of the thing is being compared I cannot if this would be just a number I would be saying simply here a minus B or something like that but since there is further an object inside it that's why I'm saying a dot price you can compare with the alphabetical orders to but that's why I am saying a dot price again it's good to look at the documentation but I think you are getting that it's accessing every single element and based on that you can do a minus B to compare it all these things it's an inbuilt method okay so now when I save this now notice what happens I go ahead run this and I click on sort courses nothing happens the array is definitely now sorted but there is nothing on the screen which is re manipulating or regenerating my list so what I can do since this list is directly impacted by the array I can call this method generate list directly up here so I'm gonna simply say generate list and run after that now notice what is going to happen something very strange I click on sort courses ah the courses are definitely sorted we are having this hard-coded value at the top which is always going to be but now this is all sort a two point three two point one two point seven two point eight where is the sorting the sorting is after that two point one to point three two point seven and two point eight so this part from complete angular course this is all sorted but why didn't above part get sorted and why is it repeating again the simple reason is now our HTML is already having some values so as soon as I click on this generate list it does all of the things for me again if regardless of whether previous values were there or not so this is a classic case which is having sound issues so first and foremost I'll come up here I would like to comment out this hard-coded list item save that and I come back here and as soon as the window loads up it gives me now I want to somehow click on this sort method I don't want to regenerate the element as many times this method is called up I want to reset everything which is inside the unordered list this is really really easy to do and this is why the classic case is introduced so unordered list you have a lot of elements inside this here we cannot use inner text because it's not just the text there is a lot of HTML inside the unordered list so we're gonna go ahead and say hey just reset the value so there we go pretty classic fix but it's important yet you know about it now if I come back here I click on the sort courses it sorts the value basically behind-the-scene it's very quick that's why we are not able to see it just go ahead and remove all of the previous values since the array is already sorted now based on that array all of these elements are being generated and what's the advantage of doing so much of the programming stuff the advantages are pretty enormous in this case I can go up and add one more value just like this I can add a name and I can see I got another course maybe a course on what should I add more up here ok maybe we got a course on Django yes we got that Django course and we can add a price on that and price is gonna be let us say that is like seven dollars or 7.4 dollars something like that I don't have to do much of stuff this is just with the one line I just added that in the object and it is available here I can sort them do all kind of stuff and this saves me in writing so much of the HTML now notice hTML is so much neat and clean we don't have to do anything in fact we can get rid of that if you wish everything is happening programmatically and which has its own charm and our own fun I told you this video is going to be a little bit longer but we understood so much of the things how we can append the things listing of the elements finding them creating them some of the classic issues of that but I think you enjoyed this project so much now something more I want to do okay right now this is a sort course button I want you to add one more button just a side of it that color should be blue and just a quick hint inside this index or HTML I say BTN - success you should say BT and - primary it's gonna be blue it should be blue in the color and once you have that one right now we are using this a price dot - B dot price so this is sorting everything into the lowest to highest I want you to have a button which is gonna sort everything from highest to lowest so add that button click a photo of the code that you have written for for it how's the output looking like probably post a story on Instagram and I would love to see how you are finishing up your assignment it is compulsory that you do your assignment okay so that's it for this video and let's catch up in next one [Music]

Channel: Hitesh Choudhary

Views: 11,763

Keywords: Programming, LearnCodeOnline, javascript, javascript for beginners, javascript course, javascript tutorials, learn javascript, udemy, coursera, udacity, learn js online, javascript projects, js tutorials

Id: fEj0IsPa37M

Length: 21min 37sec (1297 seconds)

Published: Tue Aug 25 2020