Wednesday, May 6, 2020

Understanding DOM Manipulation Methods in jQuery



Hello guys! Welcome to a new section of my tutorial on jQuery. In my previous tutorial post, i dropped a complete list of DOM manipulation methods available in jQuery. So in this tutorial, am 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 ask your questions via the comment box below where necessary.

after( content ) Method

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

Syntax

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

The 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

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

Syntax

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

The 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

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

You can compare it with the append( content ) method.

Syntax

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

The 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

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

Syntax

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

The 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

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

You can compare it with appendTo( selector ) method

Syntax

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

The 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

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

Syntax

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 - Content to insert before each target. This could be HTML or text content.

Example

The 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

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 the event handlers.

Example

The 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 clone( ) method clones matched DOM Elements, and selects the clones. This is useful for moving copies of the elements, to another location in the DOM. 

Syntax

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

The 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 child nodes from the set of matched elements.

Syntax

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

The 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 html( val ) method sets the html content of every matched elements. This property is not available by XML documents.

Syntax

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

The 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

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

Syntax

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

The 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

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

The 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

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

Syntax

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

The 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

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 - This is an optional jQuery expression to filter the set of elements to be removed.

Example

The 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

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

The 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

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

The 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 text( val ) method gets the combined text contents of all matched elements.

Syntax
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
The 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.

RECOMMENDED: JavaScript Math Methods 

text(  ) Method
The text( ) method gets the combined text contents of all 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
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
The 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 wrap( elem ) method wraps each matched element with the specified element. 

Syntax
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
The 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 wrap( html ) method wraps each matched element with the specified HTML content.

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

Syntax
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 wrapped around each target.  

Example
The 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
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
The 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
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 wrapped around each target.  

Example
The 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 matched element (including text nodes) with a DOM element.   

Syntax
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
The 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 matched element (including text nodes) with an HTML structure.   

Syntax
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
The 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 DOM Methods. In my next tutorial, i will be discussing about event handling.

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 handles available( facebook, twitter, instagram, Pinterest ). Also subscribe to our newsletter to get all our tutorial posts delivered directly to your emails.

Thanks for reading and bye for now.
Share:

0 comments:

Post a Comment