Now,
there is another operation
or property to be precise
Related to inserting,
deleting,
or moving elements,
but primarily related to removing and inserting.
On
HTML elements
that you select in your JavaScript code
with get element by ID or a query selector.
On such elements you also have an
inner
HTML
property.
And let me show you how that works.
In this index HTML file
we've got a broad variety of content,
as we all know.
And now let's say we actually
wanna change this paragraph
this first paragraph,
and we want to change the content that's inside of it.
And we actually want to insert a mixture of texts
and
HTML elements.
For this We first of all,
need to get access to that paragraph
and conveniently,
we already got access here
to first paragraph.
It's stored in this variable.
Therefore here at the bottom,
I want to show you this inner HTML property.
And for that,
we can use this first paragraph
and access the inner HTML property.
Now,
inner
HTML
is a bit like text content
where text content gives you access to the
well text content.
So to all the text notes
that are inside of this element,
including texts that might be in
nested elements,
inner HTML
gives you access to all the HTML content
stored in an element.
That could be just the text,
but it would also include other HTML elements.
And to understand this,
let me actually console log,
first paragraph,
inner HTML here
at the end of app JS.
And with that add it,
let's open the developer tools.
You now see,
I get this year in the console.
It's a mixture of text.
I'm new, and this leads to Google
and HTML code does anchor element is part
of this output here.
And that's different.
If we compare it to text content,
if I console lock the text content of first paragraph,
then we get just the text content.
As I mentioned,
this includes the text content
that might be part of nest at HTML elements
like this nested link here.
And by the way,
in case you wondering why we are in the
second paragraph instead of the first one,
keep in mind that we moved this paragraph around here.
So we are operating on the correct one.
So inner HTML contains
the
HTML elements
and it's mostly useful if we are not using it
to read
or output the values,
though, of course
we could have used cases for this as well,
but it is mostly useful if we instead use it
to set some new content with the equal sign,
just as we can do it for text content as well.
But now we'll do it for inner HTML.
Because than here there is a major difference
compared to text content.
Whereas text content asked the names of jests
wants just text.
Inner HTML actually takes a string
that could also contain HTML code.
It can contain text and or HTML code.
So here we could say,
hi,
this
is,
and then I add a strong HTML element
to emphasize the content between the opening
and closing tags.
And here I put important.
If we would use text content
to show this first,
if we would use text content here,
than, if I saved this,
you see this gets
displayed as text.
It's not interpreted as an HTML element.
It's not parsed as such by the browser
and it stands for not translate that into its own
Dom
object.
Strong is not
translated into a Dom element.
Instead it's treated as plain text because
we did set text content here.
But of course,
if we know that we want to insert a mixture of text
and HTML elements,
we can use inner HTML instead.
And if I now save this
then you'll noticed this is bold
because now indeed,
this was interpreted
and parsed as
a HTML element.
So like all the other elements here,
and that's pretty nice to have,
because
in the end,
this means that if you have more complex content
that should be inserted,
you can do it with inner HTML
instead of creating elements with
create element
and upending them manually.
As we're doing it up here in this example,
on the other hand,
doing it like this has the huge advantage
that you have all the JavaScript configuration options
for the created element.
For example,
if you want to add an event listener
to the new anchor element here,
you can easily do that because we create
new anchor element here
in our JavaScript code anyways.
So we have direct access to it.
That would be more difficult if you do it with
inner HTML.
Here you would first have to select this element,
for example,
by giving it an ID
and then using get element by ID.
But if you don't need direct access to the HTML elements,
which you want to create,
then of course you can use inner HTML
to
just
output a mixture of text
and or
HTML
elements.
And the HTML code you have in this string
can be as complex as you want.
Just keep in mind
that you're not allowed to add line breaks here.
So readability could be an issue
if this becomes more complex
and whilst JavaScript past solutions for this as well,
we can ignore them for the moment.
If you would want a line break here,
you could,
of course added by concatenating another value.
So by adding a plus here
and then starting a new line,
because in that case
a line break would actually be allowed,
but that's just some additional knowledge
which I wanted to pass on here.
The most important takeaway here
is that you have this inner HTML property
and that you can use it
to
output
some text
HTML mixture
and force the browser to parse and display it
just as it's displaying all the other HTML code
that makes up your page.