Learn JavaScript Episode #11: Setting an elements innerHTML [w/ subs]



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


Video Url:
http://youtu.be/BbPm41Ax6a0

Comments

comments