Tuesday, May 5, 2020

Introduction to jQuery DOM Manipulation



Hello guys! Welcome to another section of my tutorial on jQuery. In this tutorial, am going to be discussing about the jQuery DOM Manipulation.

jQuery provides methods to manipulate DOM in an efficient manner. You do not need to write big code to modify the value of an attribute or to  be able to extract HTML code from a paragraph or division.

jQuery provides methods such as .attr(), .html(), and .val() which act as getters, retrieving useful information from DOM elements for later use.

Content Manipulation

The html() method gets the html contents (inner HTML) of the first matched element.

Syntax

Below is the syntax for this method -

selector.html()

Example

The following below is an example which makes use of .html() and .text( val ) methods. Here the .html() retrieves HTML content from the object and then .text(val) method  sets the value of the object using passed parameters -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    $( "div" ).click( function( )  {
                         var  content = $( this ).html( );
                         $( "#result" ).text( content );
                    } );
               } );
          </script>

          <style>
               #division { 
                    width: 60px;  margin: 10px;  padding: 10px;  border: 2px  solid  #666;                          
               }
          </style>
     </head>

     <body>
          <p>Click on any square to see result:</p>
          <span  id = "result"></span>
                   
          <div  id = "division"  style = "background-color: yellow; ">
               This is a yellow square
          </div>
     </body>
</html>

You can try the above code out to see the result for yourselves.


DOM Element Replacement

You can replace a complete DOM element with with the specified HTML or DOM elements. The replaceWith( content ) serves this purpose very well.

Syntax

Below is the syntax for this method -

selector.replaceWith( content )

Example

The following below is an example which would replace division element with "<h1> Hello World </h1>" -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    $( "div" ).click( function( )  {
                         $( this ).replaceWith( "<h1>Hello World</h1>" );
                    } );
               } );
          </script>

          <style>
               #division { 
                    width: 60px;  margin: 10px;  padding: 10px;  border: 2px  solid  #666;                          
               }
          </style>
     </head>

     <body>
          <p>Click on any square to see result:</p>
          <span  id = "result"></span>
                   
          <div  id = "division"  style = "background-color: yellow; ">
               This is a yellow square
          </div>
     </body>
</html>

You can try the above code out to see the result for yourselves.

Removing DOM Elements

There may be a situation where you would want to remove one or more DOM elements from the document. JQuery provides two methods to handle this situation.

The empty() method removes all the child nodes from the set of matched elements where as the remove( expr ) method removes all the matched elements from the DOM.  

Syntax

Below is the syntax for this method -

selector.remove( [expr] )

or 

selector.empty( )

Example

The following is an example where elements are being removed as soon as they are clicked -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    $( "div" ).click( function( )  {
                         $( this ).remove( );
                    } );
               } );
          </script>

          <style>
               .div { 
                    width: 60px;  margin: 10px;  padding: 10px;  border: 2px  solid  #666;                          
               }
          </style>
     </head>

     <body>
          <p>Click on any square to see result:</p>
          <span  id = "result"></span>
                   
          <div  class = "div"  style = "background-color: yellow; "> </div>
          <div  class = "div"  style = "background-color: blue;"></div>
          <div  class = "div"  style = "background-color: green;"></div>
     </body>
</html>

You can try the above code out to see the result for yourselves.

You can also read our tutorial post on: Understanding the Basics of jQuery  

Inserting DOM Elements

There may be a situation where you would want to insert one or more new DOM elements into your existing document. JQuery provides various methods to handle this situation.

The after(content) method inserts new content after each of the matched elements where as the before(content) method inserts new content before each of the matched elements.

Syntax

Below is the syntax for this method -

selector.after( content )

or 

selector.before( content )

Example

The following below is an example where <div> elements are being inserted before the clicked element -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    $( "div" ).click( function( )  {
                         $( this ).before( 'div  class = "div"></div>' );
                    } );
               } );
          </script>

          <style>
               .div { 
                    width: 60px;  margin: 10px;  padding: 10px;  border: 2px  solid  #666;                          
               }
          </style>
     </head>

     <body>
          <p>Click on any square to see result:</p>
          <span  id = "result"></span>
                   
          <div  class = "div"  style = "background-color: yellow; "> </div>
          <div  class = "div"  style = "background-color: blue;"></div>
          <div  class = "div"  style = "background-color: green;"></div>
     </body>
</html>

You can try the above code out to see the result for yourselves.

You can also read our tutorial post on: How to add Attributes to an Element using jQuery


DOM Manipulation Methods
The following table lists down all the methods that can be used to manipulate DOM elements -

Sr.No.Method & Description
1after( content )
Insert content after each of the matched elements.
2append( content )
Append content to the inside of every matched element.
3appendTo( selector )
Append all of the matched elements to another, specified, set of elements.
4before( content )
Insert content before each of the matched elements.
5clone( bool )
Clone matched DOM Elements, and all their event handlers, and select the clones.
6clone( )
Clone matched DOM Elements and select the clones.
7empty( )
Remove all child nodes from the set of matched elements.
8html( val )
Set the html contents of every matched element.
9html( )
Get the html contents (innerHTML) of the first matched element.
10insertAfter( selector )
Insert all of the matched elements after another, specified, set of elements.
11insertBefore( selector )
Insert all of the matched elements before another, specified, set of elements.
12prepend( content )
Prepend content to the inside of every matched element.
13prependTo( selector )
Prepend all of the matched elements to another, specified, set of elements.
14remove( expr )
Removes all matched elements from the DOM.
15replaceAll( selector )
Replaces the elements matched by the specified selector with the matched elements.
16replaceWith( content )
Replaces all matched elements with the specified HTML or DOM elements.
17text( val )
Set the text contents of all matched elements.
18text( )
Get the combined text contents of all matched elements.
19wrap( elem )
Wrap each matched element with the specified element.
20wrap( html )
Wrap each matched element with the specified HTML content.
21wrapAll( elem )
Wrap all the elements in the matched set into a single wrapper element.
22wrapAll( html )
Wrap all the elements in the matched set into a single wrapper element.
23wrapInner( elem )
Wrap the inner child contents of each matched element (including text nodes) with a DOM element.
24wrapInner( html )
Wrap the inner child contents of each matched element (including text nodes) with an HTML structure.
Alright guys! We have come to the end of this tutorial post on jQuery DOM Manipulation. In my next tutorial, i will be discussing about each of the above listed methods one after the other.

Feel free to ask your questions where necessary and i will attend to them as soon as possible.

Follow us on our various social media platforms available and also subscribe to our newsletter to get our tutorial posts delivered directly to your emails. Thanks for reading and bye for now.
Share:

0 comments:

Post a Comment