Original subtitles

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.