Learn JavaScript #11 | Setting an Elements innerHTML

Alright, this is kind of a follow up video, it's not going to be too long. All we're going to do is learn how to set the inner HTML of an element, and so what we're going to do is right here I'm going to wrap this in a div and give it an element of text. So, div id="text" Did I say give it an element of text? I'm going to give it an ID of text, so that way we can manipulate that. So, what we're going to do is the first time the button is clicked we're just going to set that HTML to something else. So, I'm going to say document.getElementById, and the id is "text" and we're going to say innerHTML. Now this is not a method, this is a variable. So, this is going to return an object and an object has variables or methods that you can you can interact with. So, this is a variable and we're going to set it to "Don't do it!" Save and refresh, and when you click it, it changes that text to don't do it, and again we can only click the button once because we then remove the event listener so it's no longer listening for a click event. So, the event doesn't exist at that point. And this would be a property, I guess, inside of text. What we can do we can actually log, we can log entire objects, lists, integers, etc. through the console. So I'm going to console.log, and I'm going to say document.getElementById, and the ID is going to be "text" So, I'm just going to print out this element in JavaScript, click the button, and what you'll see right there, that's the element. Let me, can I store that as a variable? No, okay, this appears actually as an element, not as JavaScript. So, this is the element itself, the innerHTML, is the content inside of it, not the you know the code not itself but whatever is inside of it. So, that's how to access and set I guess innerHTML, and objects do have variables so we will be setting variables on objects. We're going to be creating objects here pretty soon as well. So, thank you guys for watching, I'll see you guys in the next video.