jQuery DOM Manipulations - 1
jQuery DOM Manipulations
jQuery DOM Manipulations - 1 is a free jQuery Academy lesson on CoddyKit — lesson 1 of 1. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the jQuery Academy learning path, one of 1 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Methods Introduction
Hello,
So far, we have seen what JQuery is used for and how to use the selector.
Now let's see the methods that allow us to manipulate the DOM.
text method
text() method
We use the text() method to access the content of an HTML element.
Use $ (selector).text() to read the content of an element.
In addition, the text method is used to update the content of an element. It is enough to pass the new content to the text method as an argument.
<h1 id="hello">Hello Coddy</h1>
<h2 id="target"></h2>
<script>
$(document).ready(function(){
/*
With the $ ('# hello') statement,
we selected the element with hello id
and set the element's content related
to the text method of this object to
the variable named result.
*/
var result = $('#hello').text();
/*
We find the element with the
target id in the DOM and assign the value
of the result variable to the
text method of this object.
*/
$('#target').text(result);
/*
As a result, we have assigned
the value of the h1 element
to the h2 element.
*/
});
</script>
Question
html method
html() method
Our next method is html().
As we can understand from its name, it gives the whole element rather than just the content of the element we choose.
Let's define a sample HTML element below.
Two HTML elements with base and target ids are defined. Then, as soon as the DOM is loaded.
All HTML content of the base element has been copied and added to the element with the target id
<div id="base">
<p>Hello Coddy</p>
<p>I'm p element</p>
</div>
<div id="target"></div>
<script>
/*
Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
//copy the base element HTML
var baseHTML = $('#base').html();
/* update target element
by using baseHTML value
*/
$('#target').html(baseHTML);
})
</script>Attribute Selector
attr() method
We use attributes to define extra behaviors to HTML elements.
Most of the time, we may want to access the values of these attributes while writing our Javascript codes.
In these cases, the attr method is used.
Let's learn this method by making an example below.
<a href="https://www.coddykit.com"
target="_blank"
title="CoddyKit Web App" class="base">
Go CoddyKit
</a>
<br/>
<span id="link-title"></span>
<script>
/*
Callback will run as son
as the DOM is loaded
*/
$(document).ready(function(){
//Read link's title attribute
var linkTitle = $('a').attr('title');
/* update target element content
by using linkTitle value
*/
$('#link-title').text(linkTitle);
})
</script>Attribute
The process of setting new attributes is similar to the text() and html() methods we learned before.
By passing an argument to the attr() method we use during reading, we can define a new attribute for our target element.
/*
The target attribute of the element with
my-link id has been passed the _blank value.
*/
// Mock for Judge0 Node environment
const element = { attr: function(name, value) { console.log(`Setting ${name} to ${value} for #my-link`); } };
const $ = (selector) => element;
$('#my-link').attr('target', '_blank');removeAttr
removeAttr()
We learned how to add an attribute;
now, let's see how to delete an existing attribute.
For this, we will use the removeAttr() method.
Let's look at our example.
/*
All elements
with tag a have been deleted.
*/
// Simulated DOM for Node.js
const elements = [
{ tag: 'a', target: '_blank' },
{ tag: 'a', target: '_self' },
{ tag: 'p' }
];
elements.forEach(el => {
if (el.tag === 'a') delete el.target;
});
console.log(JSON.stringify(elements));val method
val() method
Forms are indispensable for modern web applications. We will use the val() method to read the data entered by our users into the form elements.
<input type="text" id="name"
name="yourname"
value="CoddyKit" />
<p>
Your name: <span id="target"></span>
</p>
<script>
/*
Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
//copy the input elemens value
var yourName = $('#name').val();
/* update target element
text by using yourName value
*/
$('#target').text(yourName);
})
</script>Warning
In our event management lesson, we will learn how to listen to each input data and reflect it to our span element.
Extra info
To update the value of an input, we pass arguments to the val method, as you might guess.
const $ = (selector) => ({
val: (value) => console.log(`Set ${selector} to ${value}`)
});
$('#name').val('New value')Congratulations
Congratulations 🎉
We've started to learn the DOM Manipulations
In the next section, we will continue to learn DOM Manipulations in jQuery.
Frequently asked questions
Is the “jQuery DOM Manipulations - 1” lesson free?
Yes — the full text of “jQuery DOM Manipulations - 1” is free to read here on the web, and the jQuery Academy course includes 1 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the jQuery Academy course, upgrade to CoddyKit PRO.
What will I learn in “jQuery DOM Manipulations - 1”?
jQuery DOM Manipulations You practise jQuery Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start jQuery Academy?
No prior experience is required. jQuery Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 1, so you can start here or from the beginning and move at your own pace.
How long does the “jQuery DOM Manipulations - 1” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this jQuery Academy lesson?
Yes. Every jQuery Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.