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.
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>
<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.
RECOMMENDED: Introduction to jQuery DOM Manipulation
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>
<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.
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>
<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.
RECOMMENDED Post: jQuery DOM Traversing Methods with examples
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>
<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.
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>
<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.
RECOMMENDED Post: A Comprehensive Guide to DOM Filter Methods in jQuery
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>
<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>
<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.
RECOMMENDED: The Complete List of jQuery CSS Selectors Methods
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>
<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>
<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.
RECOMMENDED Post: The Complete List of Selectors in jQuery
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>
<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>
<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>
<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.
RECOMMENDED: Client-side Form Validation in JavaScript
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>
<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>
<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>
<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>
<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>
<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 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>
<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>
<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.
RECOMMENDED Post: The ultimate guide to JavaScript Date object
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.
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>
<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>
<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.
RECOMMENDED: Array object with examples
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>
<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>
<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>
<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.
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.