Now let's start with adding elements.
And for this, let's say
we want to write JavaScript code.
That adds a
new link
inside of this first paragraph,
a new link
in this paragraph.
For this, I'll go back to app JS,
or first of all,
I'll import app JS again.
I'll change this script source back to app JS.
And then in app JS,
we now need to do three main things.
When we want to add an element, then we, first of all,
have to create the new element.
Then we have to get access to the
parent element
that should hold the
new element because we need to insert it somewhere
in the Dom. And for that,
we need to get access to the element
where it should be inserted into.
And then we need to insert
the new element
into the parent element content.
And these are the three steps we typically execute.
When we create an add new elements.
Now let's start with creating a new element.
How can we create a brand new
HTML element
in JavaScript?
So without touching our HTML code,
maybe because we want to insert it when a timer expired or
when a button was clicked,
not something we're doing right now,
but that could be scenarios where some elements should be
added when a certain event occurs
and therefore to create a new element in such scenarios.
We again use to document our bridge to the Dom.
And this document does not just
have methods for selecting elements in the Dom,
but it also has a create element method for
guest what?
Creating a new element.
Now create element wants a parameter
and which parameter value could be expected here.
Well, if you want to create a new
HTML element,
you need to let the browser know
which kind of element it is.
So the element name is it
a paragraph anchor element and image?
You need to let the browser know,
and here I want to create an anchor element.
So I will type A here
and that's important.
We don't have the angle brackets here.
Instead, we just have the element name,
and we even get this suggestion menu here,
which only suggests us valid HTML element
names like A,
and then this will create a new anchor element.
Now very important at this point of time,
this element is not part of the page yet.
It will not be visible on the page.
If I save this code,
you don't find this anchor element here.
You only find the old link here,
but nowhere in this Dom, do you find the
new anchor element
instead of this just
created and for the moment only stored in memory,
that's why we need steps two and three
to then insert it into the Dom in a certain place.
where we want to have that new element.
And therefore we want to store it in a variable,
so that we can use it in these next steps,
because create element returns a value,
the created element, and hence
we can store it in a variable,
which we could name new anchor element
because that's, what's stored in there a
new
anchor
element.
Now we want to get access to the parent element that should
hold the new element
because that is how you typically insert
elements into your Dom.
You select the parent, and then you add
your new element into that parent.
Now, here, the parent could be this paragraph.
If we want to insert our anchor elements there
So to get access to this paragraph here,
we can add another of variable
first
paragraph.
And for example,
get access with document query selector
P selecting by the paragraph tag,
and as explained, this will find us the first paragraph.
It finds on the page.
And that's exactly the paragraph element I'm interested in.
So that's one way of selecting this
first paragraph on the page.
Now I did store this in a variable
so that in the next line, we can operate on this
saved first paragraph element
and then insert our anchor element.
But I'll actually do that down there
because here I'm describing this step.
So we get access to our first paragraph,
and now we need to find out how we can insert
this anchor element into this paragraph.
And we do that with the append
or the append child methods.
You can basically use either of the two.
Here, I'll just go for append.
And this now wants the
new note,
either a text note or an HTML element note,
which we have here, that should be appended into that
paragraph so that it should be inserted into this paragraph
after all the other existing children in that paragraph.
That's what append does.
There also is
insert
before
if you want to it before a certain element,
but here I want to append it because that's easiest to use.
An append now also wants a parameter value,
and that is the elements that should be appended.
So we have the element on which it is appended,
so into which it is inserted
and then two append will pass
the element that should be appended
in our case,
the new
anchor
element
and that will now appended into this first paragraph.
Now, if I saved it, we see no change here,
but if I expand my paragraph here on the right,
I actually do see this new anchor element here
inserted after this text note,
which already was part of the paragraph because of append.
As I mentioned, this does add it at the end,
but of course it is a useless link.
It has no text between the opening and closing tax.
And this has no destination either.
And I guess that makes sense because how would it have any
content after all? We just create an element here,
but we say nothing about its text content.
So the part between the opening and closing tags
or its destination,
if you want to have such text content
and such a destination, we have to configure it here.
and we can do that in the same way as
we did it for existing elements,
we can set the destination by accessing the
age ref property, and we can set
the text content by accessing the
text content property. that's possible
on our brand new element as well,
because it is just a default standard element in the end.
So here we can access new anchor element dot H ref
and set this to any destination of your choice.
For example, again, google.com
and then sets the text content.
So the part between the opening and closing tags
by accessing this text content property,
and maybe saying this leads
to Google
like this,
and if I now is save that,
now we see this link here
and we see it here, and that has the correct address
and hence clicking, it leads to Google
and that's how we can insert
a new
element into our Dom and how we can configure it in detail.