[MUSIC]

All right, it's time to start shaking things up a little more on the web page,

starting with how to read and change text.

In this video, I'll show you two DOM element properties, textContent and

innerHTML.

Each has its own approach to the DOM, and I'll explain when you'd want to use them.

So first, let's look at the textContent method.

As with many of the methods I'll show you,

you can use textContent to either read or set text values of elements.

And to follow along with me, launch the workspace for this video or

you can download the project files and use your preferred text editor.

So in the latest project files,

the index.html file is similar to the one from the previous stage,

except that I've removed the list items with the class error, not purple.

And we have a blank app.js file.

But again, you can still view all the code written up to this point when you download

the project files.

So now let's see how to use the text content method to do just that,

return the text content of a node.

So I'm on the web page we've been working on.

And I have my console open.

So I'm going to select the heading element and get its text.

I'll assign the element to the variable myHeading using querySelector.

So I'll type document.querySelector, then pass the h1 selector.

So first, let's read the heading with myHeading.textContent.

And, as you can see, we get the heading's text back, JavaScript and the DOM.

Now if we assign a string to textContent, we can also change the heading text.

So let's change it by typing myHeading.textContent

= "This is a new heading".

So now let's move into our workspace and

use textContent to make our app a little more interesting.

Let's create an input to change the kind of list we're making.

So in index.html,

I'm going to add an input and button element below the paragraph.

And I'll give both elements the class description.

Right below the input, I'll add a button with the class description.

The button will say, Change list description.

And I'm also going to give the second paragraph here the class description.

So now over in app.js, let's select the elements we'll need, namely the paragraph,

text input, and button, and assign them to const variables.

So first, I'll select the input with const

input = document.querySelector('input').

Then I'll go ahead and copy this, paste a new one below,

and change it to const p = document.querySelector.

Now, since there's more than one paragraph element on the page,

we'll use the class description to select just the one we want.

I'll paste another one right below, and this one will say,

const button = document.querySelector('button');.

So next, right below, I'll call addEventListener on button to listen for

when the button is clicked.

And when the button is clicked,

we'll use the value of the text input to set the paragraph's textContent property.

So inside, we'll say p.textContent = input.value.

And let's also add a colon to the end of the input value by typing plus and

then a semicolon inside a set of quotes.

All right, so let's save our file, go over to the browser, and refresh.

So now let's type something in this field.

Let's say Blue items.

And click the button.

And now we have a list description of blue items.

And notice that a colon was placed at the end.

Great.

So there's one more way of altering content I want to show you,

called innerHTML.

So let's hop over to app.js and

just swap out text content with innerHTML.

So back in the browser, we see that it functions exactly the same way.

I'll type blue items, and the paragraph text changes to blue items:.

However, innerHTML can do more than just handling text.

As its name suggests, it can also read and alter the elements on a web page.

You can read and replace everything between an element's opening and

closing tag.

So for example, let's select the UL element in the console and

store it in a variable.

So we'll say let ul =

document.querySelector('ul').

And now if we call innerHTML on the ul,

it gives us a string of the HTML code within the ul element.

Then if we were to set this list to a string of HTML tags and

text, we would replace the ul's content with that HTML.

Let's see how that works.

So back in the console, I'll type ul.innerHTML =,

then inside the quotes, I'll add opening and closing list item tags.

Inside the tags, I'll write, red cabbage.

So now when I hit Enter and check out the page in the browser, we see that there's

just one list item, because we replaced all the list contents with this new HTML.

All right, so well done.

Now that we can alter textual content,

let's have a look at how to change the attribute of an element.