Instructor: In this lecture we're gonna learn
how to select, create and delete elements with JavaScript.
Now, the goal of this lecture is more to be
like a quick reference for you in the future
because these methods that I'm gonna show you here
are actually way more difficult to find
and to understand from the MDN documentation.
And so when you need some of these methods in the future
then all you have to do is to come back
to this lecture and see how it works.
And let's start by learning a little bit more
about selecting elements.
And I'm gonna start at the very top of any HTML document.
So as you know, that is the document.
And so actually we do have a special way of selecting
the entire document of well, of any webpage,
so of any document and that's document element, all right.
So just document here is not enough
to select the document element
because this is not the real DOM element, all right?
So for example if we want to apply CSS styles
to the entire page we always need
to select document element, okay?
Let's just take a look here in the console.
And so indeed that is now the entire HTML here, okay?
And we can also easily select the head and body.
So that's just head and dot body as you can imagine.
So this is not visible on the page
and the body is then also the entire kind
of visible document, all right?
So for these special elements
we don't even need to write any selector
but otherwise as you already know,
we can use query selector.
So that's nothing new,
for example we can select the header element just like this
and this will then return the first element
that matches this selector here.
Now, if we want to select multiple elements
then we should use document.queryselectorAll.
So again, we already used this one
and so here on this page
we have multiple elements with these section class.
So basically each of these here are a section
with the class of section, okay?
And I will actually store this here in a variable
because I want to show you something
a little bit later, okay?
But as you know already, this will return a node list
and then that will contain all of the elements
that are a section so that are selected by this selector.
So these ones we have been using all the time.
And in fact they are the most used ways
of selecting elements.
Now, as you learned hopefully from the previous lecture
these are available not only on the document here
like this, but also on all the elements, okay?
And we actually use this a lot when we want
to select child elements as we will do
a little bit later in this section, okay?
Next I think we also already talked
about get element by ID.
And so here we only pass the ID name itself
without the selector.
So this section here has ID section one
and so, yeah, we don't need the selector here.
That's only for the query selector methods, all right.
So I showed you this one
because now there are also some others.
So there are get elements and get elements,
so with an S by tag name.
And so let's say we want to get all the buttons.
So all the elements with the name of button basically.
So that's actually store this also all buttons
and then log it to the console.
Let's give it some more space here.
And so here now you see all the buttons
that are on our page.
Now, what I wanted to show you is
that this method actually returns an HTML collection.
So that's different from a node list
because an HTML collection is actually
a so-called life collection.
And that means that if the DOM changes then this collection
is also immediately updated automatically.
So for example, if I remove this button here
and I can do that by clicking inspect
and then that will select that button here
then all I need to do is to hit delete
and then if I go back here to the console
and try to read the allButtons again
then you see that we only have eight elements in here
while before we had nine, right?
So that's something very important to keep in mind
when you use this selector here, okay?
And sometimes it's actually quite helpful
to have an HTML collection like this
which updates automatically
because of course we can also delete elements
from the DOM programmatically not just manually
like I just deleted this button here earlier, all right.
Now the same does not happen with a node list.
So if I take this whole section here and delete it
and if I then try to read all the sections
then I still have the same four elements here
in the node list.
And that's because this variable here was created
by the time that this section still existed.
And it didn't update itself
as I deleted one of its elements, all right?
So again, that's important to keep in mind, okay?
And finally I also want to show you
get elements by class name.
So this is similar again to get element by ID
and get elements by tag name.
So here we can now specify a class name.
So let's say button and once again
we don't need a selector.
So it's not a dot, it's simply the name of the classes.
And this one will also return a life HTML collection.
So just as I explained to you earlier, okay.
So this is how we select elements,
selecting elements once of these, you already knew.
So basically these two more modern ones
but these ones also have a place.
So this one and this one in case that you really need
an HTML collection which in some situations is useful
but most of the time, I simply keep using query selector
and query selector all, okay.
Next up, let's talk about creating and inserting elements.
Now we can create HTML elements using
the insert adjacent HTML function
that we used before and the Bankist application remember.
So we used insert adjacent HTML to create movements, right?
And this is a quick and easy way of creating elements
that I really like a lot and use the most actually.
So please go back to the Bankist application
and remember exactly how it works now, right?
So I don't need to talk about this one here again
and I will instead focus
on some other ways of creating elements
because sometimes it's more useful
to actually build the element a bit more
from scratch, like more programmatically using
a combination of some other methods.
So let's see how and then it will all make sense, okay?
So let's use document.createElement, okay?
And then here we need to pass
in the string of basically the tag name.
So I want to create a div here now.
And so this will return a DOM element
that we can then save somewhere.
And I'm calling this one message
and I will explain why in a second, okay?
So again, this here creates a DOM element
and then stores that element into the message.
Now that element is not yet anywhere in our DOM.
All this is is a DOM object that we can now use
to do something on it but it is not yet in the DOM itself.
So it's nowhere to be found on our webpage here, okay?
If we want it on the page then we need
to manually insert it into the page.
But first let's actually do something with it.
So for example, we can add classes.
And so now this is like any other selection
that we have, okay?
So if we have an element in our DOM and select it
for example, using query selector here like this
then the result is also a DOM object
that we can use in our code.
And this year is now just the same.
It's just an object that represents a DOM element.
And so just like before we can use, for example
class list on it, so class list, and then we can add
and I will add a class called cookie message.
And that's because here we will now programmatically
built an element which will display a small cookie message
on the bottom of the screen.
So I'm sure you've seen these on all web pages these days.
They're quite annoying.
So let me search here for cookie and here you go.
So this is the class that I created for this cookie message.
And so this is the one we are adding now
to our newly created element, okay?
Let's get rid of this here and now we can keep going.
So for example, we can add text into the element
and as always we do that using text content.
So let's just say we use cookies for improved functionality
and analytics, something like that, analytics, okay?
So this inserts simply text
but of course we can also insert a HTML.
And so that is then inner HTML
which we also already used before.
And remember that we can use both of these properties
to read and to set content, okay?
And so here let's not write a string of HTML
so let's copy this and then we can also like add a button.
Okay, I'm missing the colon here.
So let's add a button element.
Okay, so I'm just writing some HTML here.
This doesn't matter, just copy this code.
All right, It's just that it will have
the correct formatting then based
on the CSS that I wrote before.
So this will basically just display
a nicely formatted button saying, got it, okay?
But anyway we now have this element
and all we have to do now is to insert it into our DOM.
And let's do that here in our header.
So give it some more space.
So all of this year is our header element.
So this takes up so much space.
Can't get rid of it for some reason.
So all of this is our header.
And so we cannot select this header
and then a pent or message to that element.
And we already have that here, let's call this the header
and now we can say header.prepend.
And now indeed, here it is.
So here is our message.
So maybe you saw it being added here.
So indeed is now also really in our DOM.
Now, for some reason, I think this doesn't look quite right.
Well, maybe it does.
So what matters here is that we just inserted
this element really into our HTML, so right into our DOM.
So prepending basically adds the element
as the first child of this element, okay?
But we can also edit as the last child.
And so that is a append.
So header.append message and watch what happens now?
So now we see that it's really appended,
so it's the last child.
So it's gotta be, yeah, it's here.
Now what we see here is that the element
was actually only insert at once,
now that's because this element here
so message is now indeed a life element living in the DOM.
And so therefore it cannot be
at multiple places at the same time.
It's just like a person that also cannot be
at two places simultaneously, right?
So what's happened here is that we first prepended
the element and then we appended it.
And what this appends did here
was to basically move the element
from being the first child to being the last child.
All right, so basically it moved the element
and didn't really insert it
because it was already inserted here by prepend
So what this means is that we can use
the prepend and append methods not only to insert elements
but also to move them.
And again, that is because a DOM element is unique.
So it can always only exist at one place at a time.
But now what if we actually wanted
to insert multiple copies of the same element?
Well, in that case we actually would have
to first copy the first element.
So let's comment out this part here and say header.append
and then instead of appending the message directly
we first clone it.
So that's clone node, and then we need to pass
in true or we can pass in true which simply means
that all the child elements will also be copied.
And so now as you see, we get the same cookie message
in both places, but usually this is not what we want.
So let's actually only append it.
So having it here at the bottom
where it makes the most sense.
Now, to finish there are actually two more methods
and that is before and after.
And as the name says this one will insert a message
before to header element.
So as a sibling and this one here
after the header element, so also as a sibling.
Let's just get rid of this so we can see it here before.
And so now it's actually really before the header,
so first a cookie message
and then the header, but they are siblings.
And now the same here, it's now after the header.
So you have the whole header
and then we have this cookie element, all right?
So that is how we create
and insert elements, programmatically
and now to finish, let's also delete elements, okay?
So what I'm gonna do is to remove this element
when we click this button,
so let's select this button
and then as we click it, remove the message.
So document.querySelector and we gave it a class
of a button close cookie, right?
And then add event listener.
And now all we have to do is message.remove.
And again here, we don't have to select
the message element again
because we already have it in memory.
So we already have it stored in a variable.
So there's no need to run a document or query selector.
Of course we could do it and it would work as well.
So we could select the element with the class
of cookie message, but again, that's not necessary
because we already have it stored in memory, okay?
And so if I click this done, it's gone, all right?
It's nowhere to be found now,
now this remove method here is actually very recent.
Before this method existed all we could do
was to remove child elements.
And so back then we had to select the parent element first
and then remove the child from there.
So that would look like this.
So message and then we would move up in a DOM tree,
remove child and then again the name of the element
that we want to remove.
So this is a bit cumbersome
but again, this is how we used to do it.
And I'm sure you will see this in some code basis
because many people also don't yet know
about this newer way of doing things.
And by the way, this way of moving up and down
in the DOM tree like selecting, the parent element
is called DOM traversing.
And there a whole lecture on that a bit later
in this section, let's just see if this works as well.
And indeed it does.
So this is how we select, create, insert and delete elements
and to make this 100% complete, just make sure
that you review the insert adjacent HTML method as well
that we used before in the Bankist application.