Now that you have learned to add basic interactivity to your HTML pages, it's time to learn some DOM manipulation. Interactivity is not limited to animations and effects; changing the content dynamically is equally important. It makes your webpage look more engaging and attractive.
In this article, we will learn the significance of DOM manipulation and some jQuery functions to implement it.
Static VS Dynamic Web
What we built in HTML and CSS tutorials is known as the static web, meaning that it remains the same unless any changes are made to the code. A static website is purely written in HTML and CSS and does not store any data or change dynamically when a user performs an action. These web pages take less time to load and render since no processing is required.
On the other hand, the dynamic web can change dynamically when the user performs an action or when certain conditions are met. For instance, we have created a toggleable navbar in the previous articles. That navbar dynamically appears and disappears when the user performs an action. Similarly, we have applied a fading effect to the menu items in order to highlight the item the user is hovering over. In addition, we can change the text, color, or other properties of HTML elements with the help of jQuery DOM manipulation functions.
Significance of DOM Manipulation
The DOM (Document Object Model) manipulation plays a crucial role in making the web pages dynamic. It enables your web pages to react to user interactions, change the content, style, and structure of a webpage, and manipulate attributes. Moreover, you can build Single-Page Applications (SPAs) and enhance accessibility.
Furthermore, the DOM manipulation allows you to update a specific part of your webpage without refreshing the entire site (via AJAX). This saves you resources and time. Hence, DOM manipulation gives you programmatic control that helps you build modern web experiences.
When done with vanilla JavaScript (using pure JavaScript), DOM manipulation becomes really complex. Thanks to jQuery and other JS libraries that have made this too easy and simple by introducing predefined functions.
DOM Manipulation with jQuery
1. Changing Text and HTML Content
The most basic and widely used DOM manipulation methods in jQuery are:
i. .text()
ii. .html()
iii. .val()
These methods are used to get or set the values or markup of the HTML elements.
.text()
The .text() function gets or sets the text content of an element.
Example:
Getting the Content:
$(document).ready(function(){
$txt= "";
$('#change').click(function(){
$txt+= $('#heading').text();
document.write($txt);
});
});
Changing the Content:
$(document).ready(function(){
$('#change').click(function(){
$('#heading').text('Hello World!');
});
});
.html()
The .html() function returns and sets the markup of the selected element.
Example:
Getting the Markup:
$(document).ready(function(){
$txt= "";
$('#change').click(function(){
$txt+= $('#heading').html();
alert($txt);
});
});
Setting the Markup:
$(document).ready(function(){
$('#change').click(function(){
$('#heading').html("This is the new bolded heading");
});
});
.val()
This function is called when you want to get the value from an element or set a new value for it.
Example:
Getting the Value:
$(document).ready(function(){
$number = 0;
$('#value').click(function(){
$number = $('#number').val();
alert("You entered" + $number);
});
});
Setting the Value:
$(document).ready(function(){
$number = 50;
$('#value').click(function(){
$('#number').val($number);
});
});
2. Manipulating Attributes (.attr())
Next, we have the .attr() function that allows us to dynamically change the attributes of elements when the user performs an action.
Example:
Getting an Attribute:
$(document).ready(function(){
$('#get').click(function(){
alert("Source: " + $('#image').attr("src"));
});
});
Setting an Attribute:
$(document).ready(function(){
$('#set').click(function(){
$('#image').attr("src", "images/Biryani.jpg");
});
});
You can also set multiple attributes at the same time:
$(document).ready(function(){
$('#set').click(function(){
$('#image').attr({src: "images/Biryani.jpg", width: "200px", height: "200px"});
});
});
.removeAttr()
TThe .removeAttr() method lets you delete an attribute from an element.
Example:
$(document).ready(function(){
$('#remove').click(function(){
$('#heading').removeAttr("class");
});
});
3. Styling Elements with jQuery
The great thing about jQuery is that it allows you to even style elements dynamically with the .css() function. You can specify different properties and values in this function to change how an element looks on the screen when a user performs some action. Moreover, with this function, you can get the value of a predefined property for an element. Furthermore, you can add or remove classes or toggle CSS.
Example:
Getting the value of a property:
$(document).ready(function(){
$('#get').click(function(){
document.write($('#heading').css("font-size"));
});
});
Setting the value of a property:
You can set or add a new property on an element using the .css() method.
$(document).ready(function(){
$('#set').click(function(){
$('#heading').css("font-size", "32px");
});
});
Please note that when setting the CSS properties with jQuery, the property name and value go into quotation marks ("”) and are separated by a comma (,) instead of a colon (:).
Setting Multiple CSS Properties:
$(document).ready(function(){
$('#set').click(function(){
$('#heading').css({"font-size": "32px", "color":"black", "font-family":"monotype corsiva"});
});
});
Adding a New Class:
With the .addClass() method, you can assign a class to an element.
Example:
$(document).ready(function(){
$('#set').click(function(){
$('#add_btn').addClass("btn");
});
});
Removing a Class:
If you have already assigned a class you want to remove when the user performs some action, you can use the .removeClass() method.
Example:
$(document).ready(function(){
$('#remove').click(function(){
$('#heading').removeClass("text_content");
});
});
Toggling a Class:
When you are unsure whether some class is assigned to an element and want to apply it if it is not and remove it if it is, you can use the .toggleClass() method. It applies the class on one click and removes it on the other.
Example:
$(document).ready(function(){
$('#get').click(function(){
$('#heading').toggleClass("text_content");
});
});
4. Manipulating DOM Structure
jQuery also allows you to add or remove the content before and after the elements. With these functions, you can dynamically append, prepend, and insert content before and after the existing content.
Appending Content
The .append() method adds the content at the end of the existing content.
Example:
$(document).ready(function(){
$('#append').click(function(){
$('#heading').append("I am manipulated!");
});
});
Prepending Content:
The .prepend() method adds the content at the beginning of the selected element.
$(document).ready(function(){
$('#prepend).click(function(){
$('#heading').prepend("I am manipulated!");
});
});
Inserting Before and After:
The .before() method adds the content before the selected element. It is different from prepend() in that the content appears above the selected element rather than with it.
Example:
$(document).ready(function(){
$('#before).click(function(){
$('#heading').before("I am manipulated!");
});
});
On the other hand, the .after() method adds the content after the selected element. It is different from append() in that the content appears below the selected element rather than with it.
Example:
$(document).ready(function(){
$('#after).click(function(){
$('#heading').after("<button> Hide <button>");
});
});
5. Removing Elements
The .remove() function allows you to remove elements from the page.
Example:
$(document).ready(function(){
$('#remove).click(function(){
$('#heading').remove();
});
});
This method also removes any child elements within the selected element. If you only want to remove the child elements, use the .empty() function.
Example:
$(document).ready(function(){
$('#empt').click(function(){
$('#parent').empty();
});
});
The DOM manipulation techniques that we have learned in this article come in handy when working on real projects. Getting strong hands-on experience with these is good if you want to be a successful web designer.
In the next article, we will wrap up our jQuery tutorial with learning some jQuery utility functions.
