07 - jQuery DOM Manipulation

Introduction

jQuery offers a number of methods to manipulate the DOM (Document Object Model) of the HTML pages efficiently. You can even add new elements to the existing DOM and remove or replace existing elements using these methods. Some of the methods include append, prepend, after, before, remove and empty.

Different Methods

I am going to explain different effects with code samples. Before trying the sample codes, make sure that you add reference to the latest version of jQuery file correctly.

Sample Code that illustrates the First Few Examples:

<!DOCTYPE html>
  <head>
   <title>Sample Code</title>
   <script src="jquery.js"></script>
   <script>
     //add our code here
   </script>
  </head>
  <body>
   <p>Cakes List</p>
   <ul>
    <li>Black Forest Cake</li>
    <li>Chocolate Cake</li>
    <li>Pineapple Cake</li>
    <li>Apple Cake</li>
   </ul><br />
   <button>Click</button>
  </body>
</html>

1. append()

The append method adds new content or element at the end of the selected element.

Add the following lines of code inside the <script> section. Open the file using your browser after saving the changes.

$(document).ready(function() {
$("button").click(function(){
$("p").append(":<b>Modified List</b>");
$("ul").append("<li>Another Cake</li>");
});
});

In effect, the element is added as the child element as the element is added at the end of the selected element.

2. after()

The after method adds new content or element after the selected element.

Clear the code inside the <script> section and add the following lines of code.

$(document).ready(function() {
$("button").click(function(){
$("p").after(":<b>Modified List</b>");
$("ul").after("<li>Another Cake</li>");
});
});

In effect, the element is added as a sibling as the element is added after the selected element.

3. prepend()

The prepend method adds new content or element at the beginning of the selected element.

Clear the code inside the <script> section and add the following lines of code.

$(document).ready(function() {
$("button").click(function(){
$("p").prepend("<b>Modified List: </b>");
$("ul").prepend("<li>Another Cake</li>");
});
});

Here, the element is added as the child element as the element is added at the beginning of the selected element.

4. before()

The before method adds new content or element before the selected element.

Clear the code inside the <script> section and add the following lines of code.

$(document).ready(function() {
$("button").click(function(){
$("p").before("<b>Modified List: </b>");
$("ul").before("<li>Another Cake</li>");
});
});

In effect, the element is added as a sibling as the element is added after the selected element.

5. replaceWith()

The replaceWith method replaces selected elements with new element/content.

Clear the code inside the <script> section and add the following lines of code.

$(document).ready(function() {
$("button").click(function(){
$("li:even").replaceWith("<li>Another Cake</li>");
});
});

Here you could find that all the even li elements (li elements with index 0, 2 etc) get replaced by Another Cake like this:

Sample Code that illustrates the Next Few Examples:

<html>
 <head>
  <title>Sample Code</title>
  <style>
   #parent{
    width:290px;
    height:80px;
    border:1px solid black;
    background-color:pink;
   }
   .child
   {
    width:60px;
    height:60px;
    margin:5px;
    float:left;
   }
  </style>
  <script src="jquery.js"></script>
  <script>
   //add our code here
  </script>
 </head>
 <body>
  <div id="parent">
  <div class="child" style="background-color:red"></div>
  <div class="child" style="background-color:blue"></div>
  <div class="child" style="background-color:yellow"></div>
  <div class="child" style="background-color:green"></div>
  </div><br />
  <button>Click</button>
 </body>
</html>

6. remove()

The remove method removes the selected element along with its child elements

Add the following lines of code inside the <script> section. Open the file using your browser after saving the changes.

$(document).ready(function() {
$("button").click(function(){
$("#parent").remove();
});
});

You could find that the parent element and its child elements are removed.

Output before clicking the button

Output after clicking the button

7. empty()

The empty method removes only the child elements of the selected element

Clear the code inside the <script> section and add the following lines of code.

$(document).ready(function() {
$("button").click(function(){
$("#parent").empty();
});
});

You could find that only the child elements are removed.

Output before clicking the button

Output after clicking the button

Summary

We have seen a number of jQuery methods that helps you manipulate the DOM of your HTML page. There are a few more jQuery methods which you can find in the official website of jQuery.

Like us on Facebook