We have seen a lot of DOM manipulation in JavaScript. In today's video, I will tell you how you can insert elements in JavaScript and how you can remove elements from your DOM. This is very useful when you want to make single page applications or you want to do it without reloading the page. You must like this video and write Sigma Batch OP in the comment section below. Let's go to the computer screen. Let's roll the intro. Intro So guys, I have come to my computer screen. And I will make video no. 71 and make it so fast that you won't even know when I made index.html. So here I will put the exclamation markt that when I made index.html you will not even know so here I will put exclamation mark and put my boilerplate template and today we are going to talk about some functions which I have enumerated in notes and here the benefit of giving notes you will know from this video that there are so many functions there are many functions which are used the most in the industry I have written them here in the notes like suppose I have a div here and there is a container in it whose spelling I have written wrong no problem and here I will make a div.box, I will make only one this time div.box, ok I have written hey i am a box and after right click i will inspect and in console i will write document.queryselector and you can see here i will do something like this document.queryselector but i will write document.querySelector select the first box, the first box will come here and I can say here.innerHTML so by doing this I will get the HTML inside it if I do this with container then I will get the HTML inside it, I will zoom it a little bit and now you can see here that box I will zoom in and show you and now you can see here box if I do it, I will get the box's inner html whatever html is inside it, I will get it then there is inner text method which shows the html inside it as text if I do this with container I will show you you will see this because text is only this if i put two boxes here if there were two boxes here and then i show the inner text of it so you can see the text of both the boxes so sometimes we have to find the text of it would look like this so sometimes we have to find the text of an element, so we can use this, so I have done this now I will tell you how you can use the other methods so innerHTML is done and I will tell you about outerHTML so outerHTML is in the property fullHTML which is innerHTML plus element itself I will tell you the meaning of this so if I do outer html outer html so you can see what I got I got that container and the html inside it, what happens in inner html the html inside that container is found, so inner html and outer html has this difference which you just saw, so this was inner html this was outer html, after is a difference which you just saw so this was inner html and this was outer html after this we have tag name or node name which I will tell you quickly if I say, tell me the tag name of this then someone will tell you that this is div because the container is div the element I have selected is a div so sometimes you need to find out in javascript that which element is it and there is a property called node name so if I write something like this node name then also div will come now what is the difference between node name and tag name tag name is applicable only for element and node name is applicable for any type of node like comment node, text node ok so this thing will be very clear to you by reading the notes I have shown you the rest of the demo then after this there is a text content which provides access to the text inside element only text minus all the tags, understand? so if you dot text if you do text content here then you will get the text content inside it, so I hope it is clear how these things work for you now see here that you can put an attribute in div of hidden name which i have told you and if you put hidden here then this element will hide ok and you can do element.hidden is equal to true if i do this with container and i say.hidden is this hidden? no false but i can do this true sorry i will use boolean here hidden is equal to true and it is now hidden and what it will do is, it will put hidden attribute in my container so by doing this, the element is hidden now I have told you this thing, I want to tell you one more thing that I can change the inner HTML of any element so I say hey I am Harry, if I do this I want to tell you that I can change the inner html of any element. So I will say Hey I am Harry, if I do this and I will reload the page so that the thing which is missing comes back. And if I enter here, then see Hey I am Harry, the content of this has changed. So when I say document.queryselector.box.innerhtml So what will it do? Document.queryselector will select the first element in which class box is there this thing you people should be clear so i have here inner html is equal to here i marry so it has changed, it can look a little boring because of all these methods but it is written in notes don't take tension to remember because you have notes, download them download them go to codewithari.com and download now here are some methods of attribute like element lm, any element if i put.has attribute in it and want to check whether it has this attribute or not then it will tell me for example if i say that in this box, has attribute, is there an attribute style, is there, no there is no style, but if I put style attribute in it, means I say style is equal to display none, I will not do display none, display flex ok, because if I do display none then it will hide so here you see, if I do this, dot style then it will be true so it will say yes the box is selected and it has style attribute and then get attribute, if you want to get an attribute so you will say get attribute, show me what is the style attribute so you will get that this is in style and then set attribute you will say this is style, no i want to inline the display so you will say set attribute, you will say that this is the style, no, I wanted to do display inline, so you will say set attribute, and you will say set attribute, do the style, what do you do? Display inline, what do you do? Display inline, and it will be set, display inline, now you see here, its style is set to display inline, so these are some methods, which you, I won't say that you need to keep, but you should know, then remove attribute, and do lm.attribute, all attributes will come, people don't even know I won't say that you need to keep it but you should know then remove attribute and then lm.attribute and you will get all the attributes people don't even know that we can get all the attributes so knowing this will be a big thing for you because if you know you don't know that something can happen you will find my talk weird but I have felt it and until you feel it, you won't know now if you are doing anything you don't know. Now, if you are doing anything, you don't know that you can get all the attributes of an element like this. So you will never think about it. But whenever you are making a project, you will say that yes, Harry bhai told me the video number in someone that it is like this. Let's take the notes, let's take the notes and see. Let's take the notes and see how it happens. So this thing is very useful in itself. That's why I am telling you one by one. Otherwise, I would have said that read the notes and go. It is also necessary to do it. Now here I can remove any attribute. I will write re here. And this thing will also show you in your VS code. Tap and I will say remove the style. I will say remove the style. And this style is now removed. Style is removed from here. I will reload and it will come back because whatever javascript we write here is temporary it is only applicable till you refresh the page so whatever javascript you are writing here and manipulating the page is temporary you can change google, facebook, microsoft any website temporarily in your browser and here also you can edit the things now you can write here in the browser and here also you can edit the things you can write here document.design mode is equal to on and if you have done this then you can change any page, I can any website of this world any website if I write techcrunch here and let's say I write javascript here and I say I want document.design mode on I have turned on design mode I have run it document.design mode on Now I can edit anything in this website by pressing backspace Until and unless I am not redirecting See I can change it here I can do anything, content That's why it is said that you don't trust screenshots And especially if you are a web developer, then you should know this And 90% of you will know this, but again some things are very big and it is important to tell them, so that's why here what you can do is where are my notes, you can use all these methods then there are data attributes, which you can add custom attributes, suppose I want that my box in this I give an attribute in my box in which I can store which element is this for some reason suppose I want to store that who has made this element it is a very weird attribute but I want to do data created by is equal to so I can write Harry like this so I will say that data created by is equal to Harry, so I have put a data attribute here and I have written data created by is equal to Harry so I have put a data attribute here and I have written data created by and I have put Harry so this data attribute, you can put custom attribute without error you can store information on any element ok, so you can do this and now here if you want to access them, then you can say document.queryselector.box and you can say.dataset ok, and you can see it is telling created by harry why it is telling created by harry, because the data dash properties of any element, and let me say data concept by is equal to and let me write rohan and let me say I write rohan here and after this let's say I show you again so here created by harry will come, concept by rohan will come this data dash is ignored let me tell you after data dash, it is available as a key value pair where? whenever you set a dot data in any element so all this I have written in notes for you and to be honest I I forget myself sometimes. I am telling you, even after so much experience, I forget that this store is in.dataset. I got to know by seeing. So I put efforts in notes once. And I have made it in such a way that if you are not downloading then I am saying it on your face that it is a big loss. It is a big loss. I have made these notes freely available. But I am saying that even if it was paid, if you would have taken it, it would have been beneficial for you. Okay, I am telling you this. Let's talk about insertion methods, which was the topic of this video. See, whenever you want to create an element with the help of JavaScript, you can say. I will put the script tag here. Okay, script and I will write here let div is equal to document.create element so I can create a new element I can say create a div then I can say that in the div what should I do? I can set an attribute put a class in it I can put a class like this and create it ok, created I have set the attribute like this now what I can do? I want to insert it in the container so i will write document.queryselector and i will say.container, which means first container with class first element with class.container which means first element of container class, which will be this now i will say what i want to do in this i want to insert it. So, when I type insert, I get a lot of methods which I have explained here how to insert it. I have explained it very well. But, you can do it by doing innerHTML and you can also do it by doing document.body.append. So, first of all, I will tell you a very simple method .append that we have appended div by appending.append So now you see how your page looks like, so I will reload it I didn't put content in it by the way So what can I do here, I can say div.innerHTML is equal to I have been inserted and I'll put a bold tag to show you that this HTML is working So I'll put a bold tag to show you that this html is working, so I'll write here I have been inserted by harry and I wrote it like this, so you can see here I have been inserted by harry, whenever you use dot append then you will see that element at the end in which you have appended the dot ok great, so this dot append is the simplest method to append, you can append in document directly, you can append in body which i have done here in notes document.body.append div, so this will be appended so you can dynamically generate generated from javascript when you have to do this? when data is coming from somewhere and you want that in dom without reloading the page, update the data then you can do this. so this is very useful now append is a function, prepend is a function before is a function, after is a function replace with with a function it will replace this element with this node so try all these methods yourself i will show you before and after if i do dot before and show you html so you can see my body it inserted before the container if I do dot after then he will insert it after that and if I do append then he will insert it at the end and if I do prepend then he will insert it first so try it out yourself if you have any question if you write in the comment that how to tell again in prepend no bro, do it yourself do it yourself, you have all the code words everything is available on github, link is there access it, i know it's getting cold, but use your hands if it's getting hot, use your hands, anything is possible now you can see the rest of the methods now after this there is one more method, insert adjacent html we have talked about node that you had a node you made a node or you brought an element from somewhere else you can insert it and whatever you want to do you can do that but what if you have HTML, that means HTML is a string and you want to insert it, then how will you do it there is a method insert adjacent HTML I will show you an example so what i told you about dynamically creating an element this is a very good thing but i can say let cont is equal to this is my container, i can say con.insertAdjacentHtml i will do insert adjacent html and same thing is also applicable for element you can use insert adjacent element I am doing insert adjacent html here and what I will do if I do before begin then html will be inserted immediately before element if I do after begin then immediately at the beginning it will be inserted if I beginning will be inserted, before end will be at the end, after end will be after element it is hidden in its name where will be inserted, so you will try it out so you will understand it very easily, first argument is this and second is html string, I will show you, it will be easy for you so see as soon as I put double quote, it is telling that where do you want to insert from these four after end, ok and what do you want to insert I am inserted or I write I am under the water here please help me, please help me, please help me, here too much raining ok, so I have written a string here and I would like to close bold tag ok, I have closed bold tag here, so I have written this string here, very random now let's see where it will be inserted So if I show you here, what it did It made an HTML element and inserted it after the container So what will happen in after end It will insert after that element But if I want to do it after begin So where will it be inserted? It will be inserted inside it After it starts, after begin after it starts means inside, after begin and if i do it here and if i i have to double quote again for suggestions if i do before begin then what will happen? before it begins before begin what will be the before it's begin before it's begin after end means after this means this is end, element after that now you can insert html, text or element, for html insert adjacent html function, for text insert adjacent text function, for element insert adjacent element function and for element it has insert adjacent element function so you can try all these functions from the notes try it, if you don't try it then you won't understand then there is a node removal, how is it done if you remove the dot here then this node will come out of the DOM you can do this for anyone if I say that my container or my first element of.box if i remove it, it will go, if i run it again it will select again first class is equal to box element, if i remove it, it will be removed see dom is updating, watch the video if you haven't seen it, after this class name and class list i want to talk about class name and class list because it is very important suppose I have this container suppose I have given class red and one bg green ok suppose I have given class bg green and red I am not writing their styles obviously, I have just given the class so if I say that my container I want all its classes so I will say that my dot container element and if I want I can classes, so I will say that my.container element and if I want I can select it in other ways also, I have chosen the method of query selector to select this element, I could have also said document.getElementsByClassName container and then square bracket and zero this element would have been selected anyway, so it is my choice how to select this element I wrote this, I will say give me its class list so when i say class list, i will get a list like this so you can see in this, these classes are present you can see i have got this class list but if i say .class name then it will give me the value equal to class attribute it will give me the value container red bg green i will get it like this i hope it is clear to you if you want you can add some methods you can add dot class list and you can and a class will be added, if you want to remove it you can do it, it is a very useful thing so i will do it, if i say i want to add a class named harry in the class list so you see here harry will be added in the class now if i want to remove the class named harry so i can use the.remove function so if i do this, it will remove if i want to remove red glass so i will write.remove red and you can see red glass is removed if i want to insert, i will add. i will show you .add red will add red if i run it again and again Then it will be added only once Because it is already there This is used when we want Suppose i have an element And i want it to rotate sometimes So i will make a class in which i will write the rotation animation And i will toggle that class in which I will write the rotation animation and then I will toggle that class and with this comes another method, toggle .lastlist.toggle is a method toggle means if it is open then close it if it is closed then open it, this is called toggle if I say toggle the light switch, if it is open then close it and if it is closed then open it, so if class is added in this then it will move, if it is removed then it will be added so if the glass is in it then it will move if it's not then it will be in it so let me show you one thing I will add a style so that I can clear my point the video is a bit long but I have to clear the concept I will do color red I will do color red now you see as soon as I toggle this red glass will go gone from the container I will toggle again, red class is here so what I can do in this way whenever I want I can make it red or I can add any css, whenever I want I can remove it only by using one line of javascript so whatever css I want to add, I will collect it in the class and toggle that class, are you getting the class so we will do this in projects you have to see it, then it will be clear keep making because good projects are coming and all this will be used I am telling you all this will be used so I have included toggle class in notes access notes many people have not accessed notes I will say so many times and they will not do it I have no benefit in this Download the notes in your computer and it will help you a lot Trust me it will help you a lot So that was about all the functions which you should know and after reading the notes you will be able to understand JavaScript will be in your hand if you will access the notes because you will forget it anytime and i will say keep hard copy soft copy is very helpful nowadays you can open it in ipad or phone but hard copy is different when you are making projects and you will see this page number, you will remember so i believe in this page number, you remember which page you were in, which side of the book it was so I believe in this thing that hard copy is an important thing that you should have with that said, if you have not accessed this playlist yet, then do access it along with that, bookmark it, save it if you want to make me happy, then go to the first video and put a review of this course that in this course can anyone after making html, css, javascript and projects can become a full stack developer you can put a review for me till now do you think this course is good if it is good, put a review i will be happy from the bottom of my heart thank you so much for watching this video and i will see you next time.