Part 5.1jQuery and HTML

jQuery as a library was built upon JavaScript. That makes it predominantly a language for use with web pages.

This article will focus on using jQuery with HTML on web pages.

Working with HTML and text

A webpage consists of HTML and combined text that goes with that HTML. jQuery can manipulate that HTML and text very easily using two built-in methods html and text.

Both of these methods are getter and setter methods, meaning they can be used to read the current value or set the value of the HTML or text of an element.

The following example simply obtains the HTML from an element and displays it:

//This will display the HTML of the element with ID #main_name
window.alert(jQuery("#main_name").html());

This next example changes the HTML of an element:

//This will change the HTML of the element with ID #main_name to J Balfour.
jQuery("#main_name").html('<span style="-webkit-text-fill-color:green;">J Balfour</span>');

The same effect can be applied using text as with HTML, however, text differs from HTML since it will have all of it's HTML stripped. That means that the second example shown before will actually change the element to contain the HTML as a pure text and will not render it as HTML.

//This will display the text contents of the element with ID #main_name
window.alert(jQuery("#main_name").text());

This can be very useful when only the text content of an element is needed.

Of course the setter method works the same way as the setter for the html. This example will use the same content but as it's text rather than HTML, it will include the HTML as text:

//This will change the text of the element with ID #main_name to J Balfour.
jQuery("#main_name").text('<span style="-webkit-text-fill-color:green;">J Balfour</span>');

Adding and removing elements

Document Object Model (DOM) manipulation is one of the key areas of JavaScript and what it was designed for in the web. jQuery makes DOM manipulation simpler than working with vanilla JavaScript.

Adding elements

There are four methods within jQuery for adding elements; append, prepend, after and before. Each of these methods are self-explanatory.

The HTML for the above sample is shown with it.

append

Appending something to something else is to put it at the end of it. In the case of HTML, it is adding it to the end of the HTML contained in the element.

jQuery("#this_div").append("<p>This is paragraph " + (paragraphNumber++) + "</p>");

prepend

Prepending something is to put something at the very start of it. In the case of HTML, it is adding it to the start of the HTML contained in the element.

jQuery("#this_div").prepend("<p>This is paragraph " + (paragraphNumber++) + "</p>");

Notice with both the append and prepend methods the new paragraphs are being addded inside the div.

after

The jQuery after method is used to add an element precisely after the selected element.

jQuery("#this_div").after("<p>This is paragraph " + (paragraphNumber++) + "</p>");

before

The jQuery before method is used to add an element precisely before the selected element.

jQuery("#this_div").before("<p>This is paragraph " + (paragraphNumber++) + "</p>");

Removing elements

Removing elements is as easy as adding them. There are two ways in which elements can be removed using jQuery. The first method is to directly remove the element from the page using the remove method. The second method involves removing all elements from another element using the empty method.

remove

The remove method requires the element to be selected using a query selection or otherwise. Once the said element is selected, the jQuery remove method is applied to remove it from the page.

jQuery("#this_div").html('<p id="remove_me">Please remove me!</p>');
	

jQuery("#remove_me").remove();

empty

The empty method works differently in that it works on the parent element of the element(s) that need to be removed. The empty method is exactly the same as using the html method with the empty string:

jQuery("#this_div").html("");
jQuery("#this_div").empty();