Seven Most Common jQuery Methods Part One: Text() and HTML()

The course introduced seven most common jQuery methods that can save us a lot of time and make our code super clean.

• .text()
• .html()
• .attr()
• .val()
• .addClass()
• .removeClass()
• .toggleClass()

Today, I am going to share the first two methods study note with you.

I start to create a simple HTML page includes h1, an simple input and a fruit list.

Then, I link to the jQuery file and check if it is connected correctly.

.text()

According to jQuery, this method can get combined text contents of each element in the set of matched elements, including their descendants, or set the text contents of the matched elements.

For example, if I want to see the h1 text content in console, I just need to type $("h1").text(). Then, it will call back the h1 text.

We can do the same thing to the list content, too. When I select the li, it will return all list items in a string.

text() method can also change the content. I can change the h1 text content by adding the new content inside the text().

.html()

According to jQuery, it allows to get the HTML contents of the first element in the set of matched elements or set the HTML contents of every matched element.

If I want to see the HTML of the list, I can type $("ul").html(). It will return the HTML content.

If I want to update the HTML list, we can enter the new HTML list in the html(). I updated the list from three items to two items.