This course is out of date and does not reflect Frontend Masters current standards. We now recommend you take the JavaScript: The Hard Parts course.
Transcript from the "Exercise 13: Solution" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Justin Meyer: I'm gonna go through the answer in a moment but first again I'm gonna try to explain the context for what's going on here. This is the breed's page that we're gonna make eventually show tabs and in this page it has a bunch of links and a bunch of allies.
[00:00:31] [COUGH] And what I wanna show is how this HTML function should work. But actually I just realized I probably should implement it first,
>> Justin Meyer: Where did that go? Here it is. [COUGH]
>> Justin Meyer: So, if I do new a, it's gonna give me an object back with each anchor in it.
[00:01:01] And let's say I wanted to change what would jQuery allows you to do is I am gonna save this as A. I am gonna save this as dollar A's. It looks like as. You can see each one of these things is an element and elements have all of these properties and values and one of them is innerHTML.
[00:01:24] So if I were to do $as0.innerHTML. That's gonna give me the first anchors innerHTML, and I could also set it to Hi there. So all elements or all DOM elements have an innerHTML method that reads and writes the innerHTML. The HTML content inside that element. So it's not just text, you can also provide markup.
[00:01:55] If I were to put like a bolder or a strong that should make there bold. So, this is what jQueries HTML function manipulates for us, is the innerHTML properties of these elements. Now, in fact it might do things a little bit more complex than what we're doing here.
[00:02:17] But this is a good start to understanding that the most simple manipulation of the DOM possible setting innerHTML and reading from it. So what we're going to do another thing that jQuery does is let's say had the same A's and I got them with my new dollar a's.
[00:02:41] jQuery behaves differently when you call functions as a setter or a getter. So if I just wanted the first anchors HTML, I would call the HTML function in jQuery without any arguments. And this would return Doberman like we just saw, but jQuery if you pass it make it a setter.
[00:03:08] So if I wanna set everything to like, hello there, what it's gonna do is change. It's gonna call this function and it's gonna for every single element in this collection it's going to update its HTML to, Hello there. So let's make this work. So this HTML function, I mean bring back this, this HTML function is gonna be called with whatever arguments are passed here and it's going to be called with this inside this function.
[00:03:42] Is going to be this what's a left hand side of the dot the, jQuery collection. So I can iterate through every item in the collection because we create our dollar each and I am gonna get every element and I am gonna handle this setter. So by checking if there's arguments.link I make sure that someone actually passed an argument to this function and then I'm gonna enter the setter code.
[00:04:05] I'm going to go through each element and set its innerHTML to the new HTML and then I returned this just to make sure that chaining works because jQuery allows you to set the innerHTML and then you could do all this other kind of crazy stuff like I could buying to every Lynx click method, when it's clicked by the user.
[00:04:30] We'll see how chains used a little bit. And then I'm going to handle the case where arguments stat linked to 0 because nothing was passed in here. That means we're doing the getter on the first item. So I'm just going to return this 0.innerHTML.
>> Justin Meyer: Cool. Any questions about this?
[00:04:58] No. All right. So I wanna make sure this works.
>> Justin Meyer: Let me test.
>> Justin Meyer: Get rid of that breakpoint, get out of here. I must have broken proxy. Because I removed the function.
>> Justin Meyer: There, my HTML works. Cool.