Document.createElement() – Javascript DOM



how's it going guys my name is DOM and today I want to talk about the document create element method within JavaScript so it looks like this and it allows you to dynamically create new HTML elements on the fly within your JavaScript code and it's useful to build you eyes as well as update the page dynamically from a web server request in the background or you know things like that so it's basically just to update your page on the fly so what we're gonna do is we're gonna make a new HTML element and assign it to a variable so we'll get rid of this and we can say let's new elements equals document doc creates element now this method takes one parameter most of the time and that one is just the the tag name of that new element so to make a div you would type in div inside here just like that now within this code right here a new element has been created and it's a div and it's assigned to this variable right here so now with this we can actually just log out this variable and we'll see how we go so we come down here we'll say log and we'll pass in new element into there just like that we can save this go in the browser and refresh and we see we get a div tag that looks like HTML markup in the console right there now this isn't too useful so what we're gonna do is we're going to go back into the code and we're gonna change this log to dir to get a more detailed description of that object you can save this one and we'll try again refresh and now we can just click on this up here and we can see all the properties associated with this object so there's a lot more information with this now if we scroll down we can see this object is actually a HTML div element type so pretty interesting just have a look around here and see what you can find now back in the code what we'll do is we'll change this element to an input element so what's happened here we'll just type you an input now with this we're making one of those input bosses you know part of the part of the forms all that stuff so now we're going to actually append this element to the web page so we're going to add it to the page itself now we're gonna do this using the append child method so down here we'll talk about document dot body dot append child and then pass in this new element now with this we can see they were actually referring to the body element now in my in my far right here that doesn't exist so down here we'll just type that body I don't know if you've got this already but for me the body tag wasn't there so I'm gonna add that in just like that now document.body.appendchild will add this element to the body tag so it's basically just doing this input just like that go into this save it go in the browser refresh and we see the input tag added just like that very easy and very cool but that's all for this video thank you for watching and I'll see you later

7 Replies to “Document.createElement() – Javascript DOM”

Leave a Reply

Your email address will not be published. Required fields are marked *