Changing a Web Page

[00:00:00]
>> So we've been talking so far about how to read the DOM with JS, or how to basically parse the webpage that we have and look at its contents using JavaScript. JavaScript, however, can do much more. It can also edit the DOM, it can also make changes to this document.

[00:00:16]
And that's where things start to get fun and chaotic. So if you like fun and chaos, then you're in for a treat. [LAUGH] So any guesses what this spell does, document.title = "My Page"?
>> Names of the variable read or names of the document title.
>> It is related to the document title, definitely.

[00:00:42]
And, I guess, one way we can find out is we can try it. So let's pop over here, I'm gonna make some room. Okay, so right now we had said document.title is. This thing that shows up, it's a little small in the screen here, but you should see it in your page, probably in the title bar.

[00:01:03]
If I type in now this spell where I do document.title, then an equal sign separated by spaces, and then "My page", and press Enter. Don't know if you noticed, but now, up here, it doesn't say JavaScripTacToe anymore. It says My Page, because I am now the arbiter of what happens in my web browser and on this page.

[00:01:28]
So this is a little spell I can use to change the page title, for example. And we're gonna talk later about what even this is syntactically and what's going on here. And again, note that as before, we're using double quotes around a lot of these indicators that we're using, like when we had h1 in double quotes, or when we had hash p1 name, etc., in double quotes.

[00:01:52]
We're gonna talk more about that later. Okay, what about this one? What do you think this is going to do? If we had to guess? So maybe if we ignore the = "Sofia" part, document.getElementById ("p1-name") .textContent, right now, is gonna give me what on our page?
>> Rename your name.

[00:02:24]
>> It's gonna give your name.
>> It's gonna give, in this case, Anjana, right? So this is what we saw earlier, we kind of had this as part of our scavenger hunt, essentially. So right now, if I look at the element with the Id p1-name, it's a little span inside of this p1 paragraph that has Anjana in it.

[00:02:48]
And if I now add an = "Sofia" to the end, and this is all in one line, but it might wrap around, depending on how you've got your dev tools laid out. I see the word Sofia in my console here, but I also now on the page have replaced the player, although actually it's still Mica, Sofia is my middle name, but [LAUGH].

[00:03:16]
But what we've done is we've now changed who's playing this game. We've changed it, I could even literally change the name of the game, if I wanted to. So the point is that we can interact with the page itself, even its title that the browser sees, that it displays in the top in our title bar here, or anything within the page, we can manipulate.

[00:03:37]
This equals sign is very powerful. And again, we're gonna talk later about what is happening here under the hood. But in this case, I can change the text content by using this spell equals whatever text content I want. So this is going to replace, in this case, replace the text of that element with the Id p1-name.

[00:04:01]
Okay, how about this one? Any guesses what this is gonna do? So we're still working with this getElementById(''p1- name''). So it's still related to the player one name or the player x name. If I run this spell, any guess about what the player's name is going to be afterwards?

[00:04:23]
>> Sofia & friends.
>> So this append here, I wonder what that's gonna do? Guess?
>> Sofia & friends.
>> it's going to say?
>> Sofia & friends.
>> Sofia & friends. So in this case, it's not going to replace the text entirely, it's going to add onto it.

[00:04:41]
So now, we see that the old text, well, slightly old, very fresh, Sofia is still there, but now we also have the text & friends. And if I look inside the element, there it is, there it is, Sofia & friends now. So this is another way we can manipulate text, is not just by replacing it entirely, but like, let's say, adding things on.

[00:05:04]
So append lets us add on extra text, in this case, text, and maybe even other things, but we'll stop there. So this is going to add to the end of the current text content of the element.