#46 Creating DOM Elements Dynamically | DOM & DOM Manipulation | A Complete JavaScript Course

in this lecture we will learn how we can create Dome elements dynamically using JavaScript and add it to the Dom and there are different methods we are going to use to create and add HTML elements to the Dom let's go to vs code and what we want to do is just like how we created this model window for this calculate Emi we are displaying and hiding this model window by simply adding or removing a CS s class from this div element okay so on this div element when this height CSS class is applied this model window will not be displayed in the Dom in the UI but when we remove this hide CSS class from there this model window will be displayed in the UI so in order to show and hide this model window we are simply adding or removing this hide CSS class from this div but now what we want is for this apply for loan section when this apply for loan button is clicked we again want to display a model window and we want to display a model window something like this so for that I have written this HTML let me uncomment it for now let me save the changes so it should look something like this but this time we not going to create this model window by writing some HTML and then hiding or displaying it by adding or removing some CSS class instead we are going to create each element here this div this H2 element this paragraph this button Etc we are going to create it using JavaScript and then we are going to display this model window so I will comment this HTML here and I'll also copy it let's save index. HTML file let's go to script.js file and there what we are going to do is I'm going to paste this HTML here okay now why I'm pasting it here is we want to look at this HTML and then we are going to create this HTML dynamically using JavaScript so I'm writing it here for the reference I'll simply comment it and let's now learn how we can create HTML elements and add it in the Dom dynamically using JavaScript so the first thing which we are going to do here is I'm going to create a function and let's call this function so message you can call this function anything and inside this function we are going to write the logic to create this HTML using JavaScript so the first thing which we want to do is we want to create a div for that on the document object we have a method called create element and using this create element we can create any type of HTML element here we want to create a div so to this create element we need to pass a string value and there we need to specify div and this will create a div HTML element dynamically let's go ahead and let's store it in a variable and let's call that variable maybe overlay div so the div which we are creating here we are assigning it to this overlay div variable now on that div we also want to add this CSS class model overlay so we are storing that div in this variable on that variable we we going to call class list on that we are going to call this add method and we are going to add this model overlay CSS class and this should be a string value so let's wrap it within single codes all right now we are not going to add any ID because this ID is not required I'll remove it so we have created this outer div this model overlay div inside that div we want to create a another div and for that we are going to do the same thing let me copy this line actually let me copy both of these lines so to create a div we are going to use create element method this time I'm going to call this div as model rapper okay and again we are creating a div we are storing it in this model rapper and on that model rapper div so basically on this div we also want to add this model rapper CSS class so let me copy this class name and again on the model rapper we are using this class list and on that we are calling this add method and there we will pass the name of the CSS class which we want to use on that div now these CSS classes we already have it in our style. CSS file so if I scroll down you can see we have this model overlay CSS class model rapper CSS class model header model footer Etc so these are the same CSS classes which we used on the model window which we created in Emi calculator so same CSS classes I'm using on these dynamically generated divs as well now so this div is also created now inside this div we are going to have three divs this is the first div this is the second div and this is the third div and on this div we need to add model header CSS class on this second div we need to add this model content CSS class and on this third div we are going to add model fooa CSS class so let me quickly go ahead and let me create those three divs okay so I have created these three divs now in the model header div we want to add this H2 element so again what we are going to do is here we are creating the model header at the same line let's also create an H2 element so here I'm going to call it as header or maybe header 2 because it is an H2 element and here we want to create an H2 element so instead of div we will pass H2 for this header two we also want to set some text content so for that we will say header 2. text content equals now what is the text content do we want to add there for that header to it is this string value so let's copy with this and let's assign it here okay and finally we want to add this header to to this model header div so for that we can simply say model header Dot and we have different ways to add a node inside an HTML element here I'm simply going to use append child and to that we will pass this header to so basically what we are doing is we are inserting this header to inside this model header so in this example this div is the model header there inside that model header I want to add that H2 element and I want to append it as a child so for example if before this H2 if we already have something inside this div then instead of replacing that it is going to append it after that element so that's what we are using here for that append child okay then in the same way in the model footer div we want to create a button element on that button element we want to add this CSS class and we want to add this text content okay and we want to insert that button inside this model footer so here we are creating the model footer at the same line let's go ahead and let's create a button so let me copy this line and to create a button element as you already know we use create element let's call it maybe close button okay on this close button we also going to add CSS class so for that I'm going to use class list. add and what CSS class do we want to add on this button we want to add this CSS class so let's copy it here let's add it and then for that button we are also going to create a text node so again I'll say close button do text content equals okay and then we want to insert this close button inside this model footer so here let's say model footer Dot and again just like append child we also have insert adjacent element using this insert adjacent element also we can insert something inside a container element but here we also need to specify where do we want to insert it so here I'm going to use before end so before before this closing div element I want to add that button so that's why I'm using before end and after that we will specify what do we want to insert as an adjacent HTML so here we want to insert this close button okay so we have added this close button we have created this close button and we have added it to model footer we created this header and we added it to model header now we need to create the content for model content now what do we have in model content so in the model content we have an H3 element and we have a paragraph element so let's go ahead and let's create this H3 element so again we are going to use document dot create element what do we want want to create we want to create an H3 element let's go ahead and let's store it in a variable and I'm going to call it heading 3 now on this H3 element we don't have any style so I'm not going to add any CSS class or any style but we need this text content so for the text content what I'm going to do is instead of using this text content property so you can also use this property but I also want to show you a method using which also you can create text content so here we will say document do create text node okay and here we will specify what text node do we want to create so for that for now we will simply say hello John okay so this is going to return Us in node let's store it in a variable let's simply call it as text node and now let's say heading three so to this heading three we want to add that text node so for that on the heading three we are going to use append child and what do we want to append we want to append this text node and then we want to add this heading three to this model content so again on the model content let's again use append child or you can also use insert adjacent element here let me use insert adjacent element and we want to insert it at the very beginning so here in this div this should be the first element and this paragraph should be the second element so just after the opening Dev El here we want to add this H3 so for that we will specify the position and the position here is going to be after begin so as soon as the development begins after that we want to add add this heading three so let's pass it as the second argument okay then in this model content we also want to add a paragraph so again let me copy this line actually this line so we are going to create a paragraph element let me simply call it as p and since we want to create a paragraph element for this create element also we will pass P this will create a paragraph element on that paragraph element we are going to create a text content again you can also use create text node but I'm going to use text content because it is simple and we can do it in a single line and in this paragraph element we want to add this content so let me paste it here and let's move it in the same line okay all right and on that parag also do we have any style okay so on this paragraph We also adding some style so here let's say p do style dot what do we want to set here we want to set margin top okay and yeah margin top to 30 pixel so we'll assign a string value and there we will say 30 pixel and finally let's again go ahead and let's add this paragraph element to this model content so let me copy this line let's paste it here and here again we want to insert it as an adjacent element and we want to insert it before that div ends so here we will specify the position as before end and we want to add the paragraph okay so in this way we have created model content we have created model header and we have created model footer now we need to add this model header model content and model footer to this model wrapper so let's do that here let's say model rapper dot here I'm going to use append child so first we want to insert the model header then we want to insert model content to this model rapper so let me copy it paste it here and here to this model rapper we want to insert model content and then we want to insert model footer in that model rapper so if you see what we are doing is first we are creating the elements and then if if there is any style we are adding those Styles either by using style property or class list property if you want to add a CSS class if we want to add any text content we are adding that text content and once we have added all the properties for that element we also need to insert it somewhere we need to add it somewhere in the Dom that we are doing by either using append child or insert adjacent HTML when we use insert adjacent HTML at that time we also need to specify where do we want to add that element all right so we have created the model wrapper and we have added all the required elements so we have added model header model content and model footer now finally we need to add this model wrapper to this overla because if you see this model rapper div it is present inside this model overl div so we need to insert this div which we have created using model wrapper inside this model overlay div so finally in this overlay div again I'm going to use append child and there let's pass model wrapper so basically we are inserting model wrapper inside this overlay and this should be it let me save the changes Here and Now what we are going to do is we are going to call this show message function whenever this apply for loan button is clicked so where do we have that all right here we have it so instead of logging anything here let's call show message and let's also remove this console.log statement or maybe I'll comment it here I'll keep it for your reference let's save the changes and let's see if it works let's go to apply for loan there let's click on this apply for loan button and nothing has happened so let me also get back this console.log statement just to check if this function is getting corre called or not so when I click on this apply for loan it has logged something but when it is calling this show message for some reason uh okay so we have added this model rapper to this overlay div but we also need to add this overlay div somewhere right we also need to insert this overlay div which we are creating dynamically somewhere in our HTML so I want to insert inside this div so let's go to the top and here we have this main content area div so I want to insert that overlay div inside that main content area div so this is what was missing so we will access that element using document dot maybe query selector there let's pass this class name name so for that we will use Dot and then the class name and in this way we will have access to this div and to this div we want to add this overlay div so on that again I'm going to call insert adjacent element remember here I'm not calling insert adjacent HTML we also have a method called insert adjacent HTML but when we use insert adjacent HTML we can insert some HTML code but here we are not inserting any HTML code we are inserting an element which we have created dynamically so let me move it to the next line so that it will be more readable and there what do we want to insert first of all where do we want to insert we want to insert this overlay div in the end just before this div element is closing so basically just before this closing div for that I'm going to add the position as before end and then before end we want to insert this overlay div with this let's save the changes let's go to apply for loan and if I click on this apply for loan button now you will see that we can see that model window and this model window we have created dynamically from our JavaScript code so as you can see just to display this model window we have written so much JavaScript code right now what I also want is when this okay button is clicked we want to remove this model window from the Dom so here we are creating that close button so just before we are adding that close button to model footer on that close button I'm going to access on click property so whenever that button will be clicked to that I'm going to assign a function and inside that function what we are going to do is we are simply going to remove this overlay div so here we will say overlay div do remove so when we use this remove function what it does is it removes that element from the Dom so in this case it will remove this overl div from the Dom and when this overl div is removed all these elements which we have created finally it is going to go inside this overlay div because as you can see this overlay div is the outermost div inside which we are creating this model wrapper model header and other elements so once this overl div is removed from the D whatever we have inside that overl div that will also get removed from the Dom with this let's sa if the changes let's go to apply for loan let's click on this apply for loan button so the model window is displayed when I click on this okay button it is removed from the D now it is displayed when I click on this okay button it is removed from the Dom so to remove an element from the Dom we use remove function so so far so good now the only thing which is left here is currently we are displaying this hardcoded name John but instead of displaying the hardcoded name I want to display the name which the user has entered inside this first name field so for that for this function let's say we are also going to take the name parameter and when we are calling this fun function from here we are going to pass the name so we going to pass the F name let me commment this console.log statement here and let's pass F name here all right and now we are creating this S3 element here so here we are saying hello John but instead of saying hello John let's say hello and then we are going to use this name parameter with this let's save the changes again let's go to apply for loan section let's enter some value in these fields so here I'll not say John here let me put my name let's enter an email ID let's say CED employee I'll select some date of birth but it does not matter here because anyway we not going to display it in the alert window gender is maale let's say here let me check phone or email and let's click on this apply for loan button and now you will see in the alert window it says hello Manoj we have we have received your loan request and we will contact you through your provided contact and when I click on this okay button that alert window will be removed from the Dom okay so the difference between this alert window is we have created this alert window dynamically so it gets inserted in the Dom dynamically and when we click on this okay button it will get removed from the Dom but the model window which we have created in the calculate Emi there this model window is already there in the Dom but it is hidden so when we click on that calculate Emi button we are removing the hide CSS class from that Dom element and that's why it is displaying in the Dom and when we click on this okay button it is going to add the hide CSS class on that Dom element and it will hide it in the Dom it is not going to remove it from the Dom it is going to Simply hide it okay so in this lecture we also learned how we can create HTML elements dynamically using JavaScript code and how we can add it in the Dom for that we talked about different methods like append child we talked about insert adjacent HTML and we also have other methods using which we can add a new node in the Dom and we will talk about it later in this course for now this much of knowledge should be enough so this is all from this lecture if you have any questions then feel free to ask it thank you for listening and have a great day

Channel: procademy

Views: 275

Keywords: javascript, es6, es 2016, modern javascript, javascript tutorial, complete modern javascript course, procademy

Id: 0s19mRU1i_s

Length: 24min 12sec (1452 seconds)

Published: Sun Jul 07 2024