You can use it to build anything from a simple animation to a giant web application like Twitter
or Github. It gives you total control to add, remove, or modify content you've made with HTML.
You can also use it to change styles and add or remove classes.
In this lesson, we'll also be using jQuery to make interacting with the page easier.
make requests, and create animations. We're going to create a function
that adds a new item to our list.
We're going to write our code in app.js, which will run whenever the page loads.
In this step, we're going to assign a variable in app.js using the jQuery selector.
Open app.js in your text editor, and add the following code.
var itemTemplate = $('#templates .item')
var list = $('#list')
Refresh the page in your browser. Open the console and write 'itemTemplate' and 'list'. What do you see?
What other functions can you call on list and itemTemplate?
In this step, we're going to write a function to create items. It's going to create a copy of the
itemTemplate, add data to the new item, and append the new item to the list element. Add the
following code to the bottom of app.js.
the user experience interactive and seamless. You used a couple of handy jQuery functions:
The jQuery Selector $() is an easy way to fetch an item from the page. All you need to do
is specify the class, id, or tag of the element or elements you want.
.clone() creates a copy of a selected element. It's helpful for creating elements from a template.
.find() helps you find elements nested inside other elements.
.text() allows you to get and alter the text of an element.
.attr() allows you to get and alter attributes stored in your HTML. In this case, we used it store
the id of an item in a data-id attribute, that is not used for styling, just for data storage.
.addClass() allows you to add a class to an element.
.append() takes an element and attaches it to the end of another element! That way, your element
will actually show up on the page.
There are many other jQuery functions that are helpful – we'll use more as we go along. In the meantime,