We now have a youtube channel. Subscribe!

Understanding DOM Manipulation Methods in jQuery



Hello dear readers! Welcome back to another edition of our tutorial on jQuery. In our previous tutorial, we dropped a complete list of DOM manipulation methods available in jQuery. So in this tutorial, we are going to be discussing about each one of them one after the other.

This tutorial contains 24 different methods with series of examples, so i will advice you take your time to read through and also ask your questions through the comment box below where necessary.

after(content) Method

The after(content) method inserts content after each of the matched elements.

Syntax

The following below is the syntax to use this method -

selector.after( content )

Parameter Details

Here is the description of all the parameters used by this methods -

  • content - Content to insert after each matched element. This could be HTML or text content.

Example

Following example below shows a simple usage of this method -

<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 ).after( '<div class = "div"></div>' );
                    } );
               } );
          </script>

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

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

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



append( content ) Method

jQuery append( content ) method appends content to the inside of every matched element.

Syntax

The following below is the syntax to use this method -

selector.append( content )

Parameter Details

Here is the description of all the parameters used by this methods -

  • content - Content to insert after each matched element. This could be HTML or text content.

Example

Following example below shows a simple usage of this method -

<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 ).append( '<div class = "div"></div>' );
                    } );
               } );
          </script>

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

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

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

prepend( content ) Method

jQuery prepend( content ) method prepends content to the inside of every matched element.

You can compare it with append( content ) method.

Syntax

The following below is the syntax to use this method -

selector.prepend( content )

Parameter Details

Here is the description of all the parameters used by this methods -

  • content - Content to insert after each matched element. This could be HTML or text content.

Example

Following example below shows a simple usage of this method -

<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 ).prepend( '<div class = "div"></div>' );
                    } );
               } );
          </script>

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

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

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


appendTo( selector ) Method

The jQuery appendTo( selector ) method appends all the matched elements to another specified set of elements.

Syntax

The following below is the syntax to use this method -

selector.appendTo( selector )

Parameter Details

Here is the description of all the parameters used by this methods -

  • selector - This is the target to which the content will be appended to.

Example

Following example below shows a simple usage of this method -

<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 ).appendTo( "#result" );
                    } );
               } );
          </script>

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

     <body>
          <p>Click on any square to see result:</p>
          <p  id = "result">This is the First Text</p>
          <hr />
                   
          <div  class = "div" style = "background-color: yellow; "></div>
          <div  class = "div" style = "background-color: blue;"></div>
          <div  class = "div" style = "background-color: purple;"></div>
     </body>
</html>

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


prependTo( selector ) Method

The prependTo( selector ) method prepends all the matched set of elements to another specified set of elements.

Compare it with the appendTo( selector ) method.

Syntax

The following below is the syntax to use this method -

selector.prependTo( selector )

Parameter Details

Here is the description of all the parameters used by this methods -

  • selector - This is the target to which the content will be pretended to.

Example

Following example below shows a simple usage of this method -

<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 ).prependTo( "#result" );
                    } );
               } );
          </script>

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

     <body>
          <p>Click on any square to see result:</p>
          <p  id = "result">This is the First Test</p>
          <hr />
                   
          <div  class = "div" style = "background-color: yellow; "></div>
          <div  class = "div" style = "background-color: blue;"></div>
          <div  class = "div" style = "background-color: purple;"></div>
     </body>
</html>

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


before( content ) Method

jQuery before( content ) method inserts content before each of the matched elements.

Syntax

The following below is the syntax to use this method -

selector.before( content )

Parameter Details

Here is the description of all the parameters used by this methods -

  • content - This is the content to insert before each target. This could be HTML or text content.

Example

Following example below shows a simple usage of this method -

<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: 3px solid #666; 
               }
          </style>
     </head>

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

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

clone( bool ) Method

The clone( bool ) method clones matched DOM Elements, and all their event handlers and select the clones. This is useful for moving copies of the elements, and their events, to a new location in the DOM. 

Syntax

The following below is the syntax to use this method -

selector.clone( bool )

Parameter Details

Here is the description of all the parameters used by this methods -

  • bool - Set to true to enable cloning of event handlers.

Example

Following example below shows a simple usage of this method -

<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 ).clone( bool ).insertAfter( this );
                    } );
               } );
          </script>

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

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

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


clone( ) Method

The jQuery clone( ) method clones matched DOM Elements, and also selects the clones. This is useful for moving copies of the elements, to another location in the DOM.

Syntax

The following below is the syntax to use this method -

selector.clone( )

Parameter Details

Here is the description of all the parameters used by this methods -

  • NA.

Example

Following example below shows a simple usage of this method -

<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 ).clone( ).insertAfter( this );
                    } );
               } );
          </script>

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

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

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

empty( ) Method

The empty( ) method removes all the child nodes from the set of matched elements.

Syntax

The following below is the syntax to use this method -

selector.empty( )

Parameter Details

Here is the description of all the parameters used by this methods -

  • NA.

Example

Following example below shows a simple usage of this method -

<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 ).empty( );
                    } );
               } );
          </script>

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

     <body>
          <p>Click on any square to see result:</p>
                   
          <div  class = "div" style = "background-color: yellow; ">Five</div>
          <div  class = "div" style = "background-color: blue;">Six</div>
          <div  class = "div" style = "background-color: purple;">Seven</div>
     </body>
</html>

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


html( val ) Method

The jQuery html( val ) method sets the html content of every matched elements. This property is not available by XML documents.

Syntax

The following below is the syntax to use this method -

selector.html( val )

Parameter Details

Here is the description of all the parameters used by this methods -
  • val - This is the html content to be set.

Example

Following example below shows a simple usage of this method -

<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 ).html( "<h1>Click on the next square</h1>" );
                    } );
               } );
          </script>

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

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

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


html( ) Method

The html( ) method gets the html content(innerHTML) of the first matched element. This property is not available by XML documents.

Syntax

The following below is the syntax to use this method -

selector.html( )

Parameter Details

Here is the description of all the parameters used by this methods -
  • NA.

Example

Following example below shows a simple usage of this method -

<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" ).html( content );
                    } );
               } );
          </script>

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

     <body>
          <p>Click on any square to see result:</p>
          <p  id = "result">This is the Test</p>
                   
          <div  class = "div" style = "background-color: yellow; ">
               <h1>This is Square One</h1>
          </div>
          <div  class = "div" style = "background-color: blue;">
               <h1>This is Square Two</h1>
          </div>
          <div  class = "div" style = "background-color: purple;">
               <h1>This is Square Three</h1>
          </div>
     </body>
</html>

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


insertAfter( selector ) Method

The insertAfter( selector ) method inserts all the matched elements, after another specified set of elements.

Syntax

The following below is the syntax to use this method -

selector.insertAfter( selector )

Parameter Details

Here is the description of all the parameters used by this methods -
  • selector - The content after which the selected elements is inserted.

Example

Following example below shows a simple usage of this method -

<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( )  {
                         $( "#source" ).insertAfter( this );
                    } );
               } );
          </script>

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

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

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


insertBefore( selector ) Method

The jQuery insertBefore(selector) method inserts all of the matched elements, before another specified set of elements.

Syntax

The following below is the syntax to use this method -

selector.insertBefore( selector )

Parameter Details

Here is the description of all the parameters used by this methods -
  • selector - Content before which the selected elements is inserted.

Example

Following example below shows a simple usage of this method -

<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( )  {
                         $( "#source" ).insertBefore( this );
                    } );
               } );
          </script>

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

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

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

remove( expr ) Method

remove( expr ) method removes all the matched elements from the DOM. This does not remove them from the jQuery object, allowing you to use the matched elements further.

Syntax

The following below is the syntax to use this method -

selector.remove( expr )

Parameter Details

Here is the description of all the parameters used by this methods -

  • expr - An optional jQuery expression to filter the set of elements to be removed.

Example

Following example below shows a simple usage of this method -

<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( ).appendTo( "#result" );
                    } );
               } );
          </script>

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

     <body>
          <p>Click on any square to see result:</p>
          <p  id = "result">This is the First Test</p>
          <hr />
                   
          <div  class = "div" style = "background-color: yellow; ">Five</div>
          <div  class = "div" style = "background-color: blue;">Six</div>
          <div  class = "div" style = "background-color: purple;">Seven</div>
     </body>
</html>

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


replaceAll( selector ) Method

The replaceAll( selector ) method replaces the elements matched by the specified selectors with the matched elements.

Syntax

The following below is the syntax to use this method -

selector.replaceAll( selector )

Parameter Details

Here is the description of all the parameters used by this methods -
  • selector - The elements to find and replace the matched elements with.

Example

Following example below shows a simple usage of this method -

<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( )  {
                         $( '<div  class = "div"></div>' ).replaceAll( this );
                    } );
               } );
          </script>

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

     <body>
          <p>Click on any square to see result:</p>
                   
          <div  class = "div" style = "background-color: yellow; ">Five</div>
          <div  class = "div" style = "background-color: blue;">Six</div>
          <div  class = "div" style = "background-color: purple;">Seven</div>
     </body>
</html>

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

replaceWith( content ) Method

The replaceWith(content) method replaces all the matched elements with the specified HTML or DOM elements. This returns the element that was just replaced, which has been removed from the DOM.

Syntax

The following below is the syntax to use this method -

selector.replaceWith( content )

Parameter Details

Here is the description of all the parameters used by this methods -
  • content - Content to replace matched elements with.

Example

Following example below shows a simple usage of this method -

<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( ( '<div  class = "div"></div>' ) );
                    } );
               } );
          </script>

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

     <body>
          <p>Click on any square to see result:</p>
                   
          <div  class = "div" style = "background-color: yellow; ">Five</div>
          <div  class = "div" style = "background-color: blue;">Six</div>
          <div  class = "div" style = "background-color: purple;">Seven</div>
     </body>
</html>

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


text( val ) Method
The jQuery text( val ) method gets the combined text contents of all matched elements.

Syntax
The following below is the syntax to use this method -

selector.text( val )

Parameter Details
Here is the description of all the parameters used by this methods -
  • val - This is the text value to be set.

Example
Following example below shows a simple usage of this method -

<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 ).text( "<h1>Click on another Square</h1>" );
                    } );
               } );
          </script>

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

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

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


text( ) Method
The jQuery text( ) method gets the combined text contents of all the matched elements. The result is a string that contains combined text contents of all matched elements. The method works both on HTML and XML documents.

Syntax
The following below is the syntax to use this method -

selector.text( )

Parameter Details
Here is the description of all the parameters used by this methods -
  • Na.

Example
Following example below shows a simple usage of this method -

<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 ).text( );
                         $( "#result" ).text( content );
                    } );
               } );
          </script>

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

     <body>
          <p>Click on any square to see result:</p>
          <p  id = "result">This is the First Test</p>
                   
          <div  class = "div" style = "background-color: yellow; ">
               <h1>This is square One</h1>
          </div>
          <div  class = "div" style = "background-color: blue;">
               <h1>This is square Two</h1>
          </div>
          <div  class = "div" style = "background-color: purple;">
               <h1>This is square Three</h1>
          </div>
     </body>
</html>

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

wrap( elem ) Method
The jQuery wrap( elem ) method wraps each matched element with the specified element.

Syntax
The following below is the syntax to use this method -

selector.wrap( elem )

Parameter Details
Here is the description of all the parameters used by this methods -
  • elem - A DOM element that will be wrapped around each target.

Example
Following example below shows a simple usage of this method. This wraps destination square with a square when any of the square gets a click -

<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( )  {
                    
                    $( ".inner" ).click( function( )  {
                         var  newcolor =  $( this ).css( 'background-color' );
                         $( "#destination" ).wrap( "div  class = 'newinner'  
                              style = 'border: 3px solid "+newcolor +" ';></div>" );
                    } );
               } );
          </script>

          <style>
               .inner { 
                    margin: 10px;  padding: 10px;  border: 3px solid #666; 
               }
               .newinner { padding: 15px; }
          </style>
     </head>

     <body>
          <p>Click on any square to see result:</p>
                   
          <div  class = "inner"  id = "destination">Wrap this</div>
          <div  class = "inner" style = "background-color: yellow; ">Five</div>
          <div  class = "inner" style = "background-color: blue;">Six</div>
          <div  class = "inner" style = "background-color: purple;">Seven</div>
     </body>
</html>

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


wrap( html ) Method
The jQuery wrap( html ) method wraps each matched element with the specified HTML content.

This wrapping process is most useful for the adding of additional structure into a document, without ruining the original qualities of the document.

Syntax
The following below is the syntax to use this method -

selector.wrap( html )

Parameter Details
Here is the description of all the parameters used by this methods -
  • html - A string of HTML that will be created on the fly and then wrapped around each target.

Example
Following example below shows a simple usage of this method. This wraps destination square with a square when any of the square gets a click -

<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 =  '<div  class = "div"></div>';
                         $( "#destination" ).wrap( content );
                    } );
               } );
          </script>

          <style>
               .inner { 
                    width: 60px;  margin: 10px;  padding: 10px;  border: 3px solid #666; 
               }
               .newinner { padding: 15px; }
          </style>
     </head>

     <body>
          <p>Click on any square to see result:</p>
                   
          <div  class = "inner"  id = "destination">Wrap this</div>
          <div  class = "inner" style = "background-color: yellow; ">Five</div>
          <div  class = "inner" style = "background-color: blue;">Six</div>
          <div  class = "inner" style = "background-color: purple;">Seven</div>
     </body>
</html>

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


wrapAll( elem ) Method
wrapAll( elem ) method wraps all the elements in the matched set to a single wrapper element.

Syntax
The following below is the syntax to use this method -

selector.wrapAll( elem )

Parameter Details
Here is the description of all the parameters used by this methods -
  • elem - A DOM element that will be wrapped around the target.

Example
Following example below shows a simple usage of the method. This wraps all the squares with a new square -

<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( )  {
                    
                    $( ".wrapper" ).click( function( )  {
                         var  newcolor =  $( this ).css( 'background-color' );
                         $( ".inner" ).wrapAll( "div  class = 'newinner'  
                              style = 'border: 3px solid "+newcolor +" ';></div>" );
                    } );
               } );
          </script>

          <style>
               .wrapper { 
                    margin: 10px;  padding: 10px;  border: 3px solid #666; 
               }
               .inner { padding: 15px;  border: 3px solid #666; }
          </style>
     </head>

     <body>
          <p>Click on any square to see result:</p>
                   
          <div  class = "inner"  id = "destination">Element One</div>
          <div  class = "inner"  id = "destination">Element Two</div>
          <div  class = "inner"  id = "destination">Element Three</div>
          <div  class = "wrapper" style = "background-color: yellow; ">Five</div>
          <div  class = "wrapper" style = "background-color: blue;">Six</div>
          <div  class = "wrapper" style = "background-color: purple;">Seven</div>
     </body>
</html>

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


wrapAll( html ) Method
wrapAll( html ) method wraps all the elements in the matched set to a single wrapper element.

Syntax
The following below is the syntax to use this method -

selector.wrapAll( html )

Parameter Details
Here is the description of all the parameters used by this methods -
  • html - A string of HTML that will be created on the fly and then wrapped around each target.

Example
Following example below shows a simple usage of this method -

<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 =  '<div  class = "div"></div>';
                         $( "div" ).wrapAll( content );
                    } );
               } );
          </script>

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

     <body>
          <p>Click on any square to see result:</p>
                   
          <div  class = "div"  id = "destination">This is First Test</div>
          <div  class = "div" style = "background-color: yellow; ">Five</div>
          <div  class = "div" style = "background-color: blue;">Six</div>
          <div  class = "div" style = "background-color: purple;">Seven</div>
     </body>
</html>

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


wrapInner( elem ) Method
wrapInner( elem ) method wraps the inner child contents of each of the matched elements (including text nodes) with a DOM element.

Syntax
The following below is the syntax to use this method -

selector.wrapInner( elem )

Parameter Details
Here is the description of all the parameters used by this methods -
  • elem - A DOM element that will be wrapped around the target.

Example
Following example below shows a simple usage of this method -

<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 ).wrapInner( document.createElement( "b" ) );
                    } );
               } );
          </script>

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

     <body>
          <p>Click on any square to see result:</p>
                   
          <div  class = "div"  id = "destination">This is First Test</div>
          <div  class = "div" style = "background-color: yellow; ">Five</div>
          <div  class = "div" style = "background-color: blue;">Six</div>
          <div  class = "div" style = "background-color: purple;">Seven</div>
     </body>
</html>

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

wrapInner( html ) Method
wrapInner( html ) method wraps the inner child contents of each of the matched elements (including text nodes) with an Html structure.

Syntax
The following below is the syntax to use this method -

selector.wrapInner( html )

Parameter Details
Here is the description of all the parameters used by this methods -
  • html - A string of HTML that will be created on the fly and wrapped around the target.

Example
Following example below shows a simple usage of this method -

<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 =  "<b></b>";
                         $( this ).wrapInner( content );
                    } );
               } );
          </script>

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

     <body>
          <p>Click on any square to see result:</p>
                   
          <div  class = "div"  id = "destination">This is First Test</div>
          <div  class = "div" style = "background-color: yellow; ">Five</div>
          <div  class = "div" style = "background-color: blue;">Six</div>
          <div  class = "div" style = "background-color: purple;">Seven</div>
     </body>
</html>

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

Alright guys! We have come to the end of this tutorial on jQuery DOM Manipulation Methods. In our next tutorial post, we will be discussing about the Event Handling in jQuery.

Follow us on our various social media handles available and also subscribe to our newsletter to get our tutorial posts delivered directly to your emails.

Thanks for reading and bye for now.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2023 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain