jQuery DOM Manipulations - 2
jQuery DOM Manipulations - 2
jQuery DOM Manipulations - 2 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.
Introduction & append
Hello,
In our examples so far, we have done an update or read operation for HTML DOM objects.
We will learn the insert operation with append() method.
Let's look at an example.
<button id="add">
Add New Item
</button>
<div id="target"></div>
<script>
/*
Listen for an element with
the add id click
*/
$('#add').click(function(){
/*
append '<p>This is the appended
text</p>' to #target element
*/
$("#target").append("<p>Appended text</p>");
})
</script>append
After running the above code, the append method will add the HTML (passed as argument) code at the end of the #test element.
prepend
prepend() method
The opposite of the append() method is the prepend() method. The append() method adds it to the end of the target element's content, while prepend adds it at the beginning.
<div id="target"></div>
<button id="add">
Add New Item
</button>
<script>
/*
Listen for an element
with the add id click
*/
$('#add').click(function(){
/* append '<p>This is the prepended text</p>'
to #target element
*/
$("#target").prepend("<p>This is the appended text</p>");
})
</script>question
With the append and prepend methods, we were able to add new HTML elements at the end and the beginning of the target element.
So how do we do if we want to add it as the sibling of the target element?
example
Let's continue the previous example.
Our HTML node in the first case is as follows.
<div id="test">
<p>initial paragraph</p>
</div>after - before methods
after() and before() methods
We can add HTML elements before and after the target element with the after() and before() methods.
In the example code below, a new element has been added to the element with #test id just before and right after it in the sibling hierarchy.
<div id="test">
<p>initial paragraph</p>
</div>
<script>
$('#test').before('<p>I am before the #test element</p>');
$('#test').after('<p>I am after the #test element</p>');
</script>
multiple insert
Until now, we have seen the prepend(), append(), before(), and after() methods. I forgot to explain a subject. Sorry, I can be forgetful sometimes 😇.
So what do we do if we want to add more than one node at the same time?
As in the example below,
we can add more than one node at the same time by passing more than one argument to the related methods.
<p>
<span id="target"></span>
</p>
<script>
var firstNode = '<p id="first-node">First node</p>';
var secondNode = '<p id="first-node">Second node</p>';
var thirdNode = '<p id="first-node">Third node</p>';
/*
The following four methods work
with the same logic and take
more than one argument.
*/
$('#target').before(firstNode, secondNode, thirdNode);
$('#target').after(firstNode, secondNode, thirdNode);
$('#target').append(firstNode, secondNode, thirdNode);
$('#target').prepend(firstNode, secondNode, thirdNode);
</script>chaning example
In the example above, more than one node has been added at the same time. As you can see, the syntax will be the same even if they are in different methods.
In the meantime, we can write code in JQuery by changing.
In this way, we can write shorter and more effective code.
Let's look at the example and learn how to write chained code in jQuery.
<p id="test"></p>
<script>
var firstNode = '<p id="first-node">First node</p>';
var secondNode = '<p id="first-node">Second node</p>';
var thirdNode = '<p id="first-node">Third node</p>';
/*
We made our code shorter.
Also, we have done the select operation
on the DOM only once instead of twice.
*/
$('#test').before(firstNode, secondNode, thirdNode)
.after(firstNode, secondNode, thirdNode);
</script>wrap method
wrap() method
Which method will we use if we want to put the HTML element into another container?
Of course, with the wrap() method.
The following example shows a simple use of the wrap method.
<div id="target"></div>
<script>
/*
When we apply the code below.
The node we assigned as an argument
will come around our target element.
*/
$("#target").wrap('<div class="container">Container wrapped the target element</div>');
//The result will be as follows
/*
<div class="container">
Container wrapper the target element
<div id="target">
</div>
</div>
*/
</script>
Question
unwrap method
unwrap() method
We have the opposite method of the wrap() method. With the unwrap() method, we can delete the parent element of a target element.
const $ = (selector) => ({
unwrap: () => console.log(`Unwrapped ${selector}`)
});
$("#target").unwrap();empty method
empty() method
Let's look at the deletion in HTML elements.
With the empty() method, we can delete all children and descendants of a target element.
// Removes all descendants of the element from the DOM.
// (Simulated for Node.js environment)
const $ = (selector) => ({
empty: () => console.log(`Removed all descendants of ${selector}`)
});
$("#target").empty();remove() method
remove() method
The remove() method removes not only the descendants of the element but also the element itself from the DOM.
/*
Removes the element and
all descendants of the element from the DOM.
*/
$('#target').remove();Congratulations
Congratulations 🎉
we learned the DOM Manipulations.
In the next section, we will learn the Styling with JQuery.
Frequently asked questions
Is the “jQuery DOM Manipulations - 2” lesson free?
Yes — the full text of “jQuery DOM Manipulations - 2” 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 - 2”?
jQuery DOM Manipulations - 2 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 - 2” 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.