Jamie Balfour

Welcome to my personal website.

Find out more about me, my personal projects, reviews, courses and much more here.

Part 5.1jQuery and HTML

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

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>');
Note that the getter method has no parameters whereas the setter method contains precisely one parameter.

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

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.

The jQuery Sizzle engine for finding elements by their ID, class or tag name simply using one method (jQuery("#main_name")) was actually the inspiration for JavaScript's own querySelectorAll function (document.querySelectorAll("#main_name")).

Adding elements

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

This div will be used with each of the following samples.

The HTML for the above sample is shown with it.


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>");


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.


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>");


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.


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.



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:

Feedback 👍
Comments are sent via email to me.