Raghav Khanna · 04 Dec 2023 · 1048 views

DOM Manipulation using JQuery

JQuery is a Javascript library that is fast, lightweight, and easy to use. Handling events and DOM manipulation becomes very easy using jQuery. DOM stands for Document Object Model. It is a programming interface that lets web developers play with the document’s structure, style, content, and CSS. In this blog, we will learn how we can use JQuery for DOM Manipulation.

Here we have an HTML snippet for your reference to play with.

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
</head>
<body>
  <div class=”first”>First test</div>
 <div id=”one”></div>
<p style=”color:blue;border:1px solid black;”>Para tag</p>
<input type=”text” id=”name”></input>
   <button id="text">Get Text</button>
   <button id="html">Get HTML</button>
</body>
</html>

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
</head>
<body>
  <div class=”first”>First test</div>
 <div id=”one”></div>
<p style=”color:blue;border:1px solid black;”>Para tag</p>
<input type=”text” id=”name”></input>
   <button id="text">Get Text</button>
   <button id="html">Get HTML</button>
</body>
</html>

The basic syntax of JQuery is-

$(Selector).action()

Selector here refers to the HTML element to be accessed. It can be a class, id, or any HTML tag itself. Action is any event or function that is to be performed on the selected selector.

For ex:

 $(‘div.first’).click(function(){

 alert("First Div Clicked!!!");

})

So here we are accessing a div element having class ‘first’, and clicking on it will trigger an event which will alert with the text ‘First Div Clicked!!!’

Now let’s take a look at some of the most used functions of JQuery:

1) html(), text(), and val() as setters or to retrieve data-

Both of the functions text() and html() are used to extract texts or HTML in text format from a selector. Text() returns the text written inside the selector whereas html() returns the text along with the html tags and elements. Function val also works the same way, it returns the value of an input element such as select, textbox, or input, etc.

 Var str=$(‘div#one’).html();

 Var name=(‘input#name’).val()

Here we are putting the HTML context along with the content inside the div with id ‘one’ in the variable str. In the second statement, we are fetching the value of an input element with the id as the name.

All three of these functions are used as both getter and setter for the elements. Here we used them as getters, now let’s see how we can use them as setters.

2) html(), text(), and val() as setters or input data-

All three functions can also be used to set the values of an HTML element. The val() function is used to set the values of input type elements. Let’s see an example of how we can use all three of them to set the content:

a) $(‘div#one’).text(“This is the text content”)

Here we are setting the content of the div with an ID of ‘one’.

b) $(‘div#one’).html(“<b>Bolder text</b>”)

Here we are adding the content along with the HTML element and content is being set inside the div with an ID ‘one’.

c) $(‘input#name’).val(“Test”)

Here we are assigning Test as the value to the input element with an ID of name.

3) Prop() and Attr()-

HTML tags and elements have properties and attributes that we can change or update using jquery. Let’s see how Prop() function works:

var style = $('p').prop('style');

Now, here we are fetching the ‘style’ property of the ‘p’ tag and assigning the value of style(“color:blue;border:1px solid black;”) to the variable style.

In case we wish to change the style property and wish to assign other properties we can do this by the following:

$('div').prop('class','yellowDiv')

Here we are assigning a class ‘yellowDiv’ to the div tag using the prop() function. So prop() function will take 2 parameters prop(‘property’,’value’)

The function attr() works similarly. It can also take 2 parameters as prop() which is attr(‘attribute’,’value’).

$('p').attr('style');

This will fetch the style attribute of the p tag (“color:blue;border:1px solid black;”) same way as prop() did. Now let’s us set the value of an attribute using attr():

$(p).prop('class','yellowDiv')

Here we are assigning the value of the attribute class as ‘yellowDiv’.

You can use the prop() and attr() functions interchangeably as they work similarly.

4) Append(), Prepend() and Remove()-

Now let’s see how we can add another element before and after an existing element. As the name suggests, Append() lets you add content after an existing element while Prepend() will let you add content before an existing one. Now let’s see them in work:

<p>Hey </p>

Now let’s append the text after ‘Hey’ in the p tag.

$('p').append('There');

Now the p tag will be having ‘Hey There’.

$(‘p’).prepend(‘Oh ’)

Since we have used prepend() here, now the text inside the p tag will be ‘Oh Hey There’

Now for Remove() let’s add more HTML snippets here:

<div> Div

<label> Label.</label>

</div>

$(‘label’).remove()

After this statement is executed, the label tag inside the div will be removed. We will be left with <div> Div </div>

So far we have covered a lot of functions that you can use in your DOM manipulation. These functions will make it easier to manipulate your HTML attributes, elements, and content using JQuery. All you need is to practice and use them to see how they work.

Well, This was all for this blog. In the upcoming blog we will cover how we can handle events using JQuery, so kindly stay Updated with us. Contact us in the comment section if you have any queries.