Modifing HTML Elements Lesson 12


#1


https://www.codecademy.com/courses/web-beginner-en-v6phg/2/3?curriculum_id=50a3fad8c7a770b5fd0007a1#


Err message Oops, try again. Make sure to use .append() to add your .item to your .list!

I am at a loss for why this isnt working?


$(document).ready(function()    {
    $('#button').click(function() {
        var toAdd = $('input[name=checkListItem]').val();
        $('div.list').addClass("item").append(toAdd);
    });
});


#2

That means sticking to the more rudimentary,

$('.list').append('<div class="item">' + toAdd + '</div>')

#3

Awesome, thank you. What was my code doing then?
I guess I'm asking what makes my code not work?


#4

Good follow up question.

The first issue is the context. Your code kept adding the class to the same parent node, not a newly appended child node. The div with class 'list' is the parent of the div with class 'item' (in the correct code). All the text was piled into one container in your code.

A minor but pertinent concern is, using the tag name in the selector. It does not raise the specificity by much, and in our case since there is only one element with the class, the class is the more specific and all we need.

$('.list')

A more oblique issue is the chaining, notwithstanding the above note what the correct code will do.

$('.list').addClass('item')

adds the class to the current context object, the parent node in this case. From a vanilla perspective, in pseudo code,

this.classList.append('item')

where this is the context object, $('.list').


We could do some variations on the earlier posted model, but what if we approach this from the child node point of view, and build the child, then append to the parent?

$('<div/>').addClass('item').text(toAdd).appendTo($('.list'))

Needs testing.

Here the idea is to create the child node in memory, tagname, classname and textnode, then append the completed object to the object of our choice. Now the chaining is in the context of the new object, not the parent. Making sense?


Tested.

The target object does not need to be a jQuery object. (note)

$(document).ready(function(){
    var toAdd = "some value"
    $('<div/>').addClass('item').text(toAdd).appendTo('.list');
});

note

This is because appendTo creates a transient object using our selector.


Commentary

If you are new to Object Oriented Programming these concepts are going to be a little bit abstract. JavaScript isn't (or rather wasn't) considered an OOP language, but prototypal. That's because it is a prototype based language.

jQuery helped to bridge that gap so we could think in OOP terms, and let JS do the heavy lifting. jQuery is an abstraction, and consequently its code is, too. It never hurts to investigate into what JS is doing under the hood when we give jQuery something. The more we understand vanilla code, the more we can do with jQ.

$

is the alias for jQuery, the name of the parent class of objects in jQuery. It is built entirely on the JavaScript scaffold, so has as a parent class, Object. Everything we expect from JavaScript is inherited and comes down through jQuery.


#5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.