Advanced JS Fundamentals to jQuery & Pure DOM Scripting Exercise 13: Implementing the html() method

Transcript from the "Exercise 13: Implementing the html() method" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Justin Meyer: Now we're going to add an HTML method that gets, or sets, the inner HTML of all of the elements in a collection. So here if I got all li's, I could set all all li's HTML to have a div with All Dogs and then I could read back the first li's HTML and get that back like this.

[00:00:33] So to give a little bit of explanation on what you're gonna do, I can keep doing this pattern. I'm gonna go to this HTML function and first I need to figure out if I'm either getting or setting the HTML, all right. So the best way of getting or setting the HTML is to, well I'm gonna pseudocode this, I'll give this one to you guys.

[00:00:59] If do you arguments.length, that means someone passed in an argument. That means I'm gonna do setting, otherwise I'm going to get this

[0]'s, innerHTML, really. Now for setting what I need to do is go through each item in this, each element in 'this' and set its innerHTML to newHtml.

[00:01:53]
>> Justin Meyer: Now, you can use $.each in here on this. This is a really nice way of doing it is to do $.each and then pass at this, and then you get a function that will be called back with each element in this. So I'll give that to you.

[00:02:09] So you're gonna do function, and this'll get called back with the index and the element. And I'm gonna change this to return, and you're also gonna want to return the original collections because jQuery supports chaining, so you'd wanna return here to make sure it's returning this. So if that was confusing, basically all I'm doing is the same as doing this.

[00:02:36] Cuz jQuery, anytime that there's a setter, if you're always setting the values in your collection, it always returns the instance of jQuery back to you.