Most Popular Tutorials
-
what is jquery
-
Document object model (DOM)
-
JQuery Syntax
-
jQuery Selectors
-
Get and set value in jquery
-
JQuery Attribute
-
Attribute Methods
-
jQuery - DOM Manipulation
-
Jquery events
-
JQuery Effects
-
Jquery Html/css Effects
-
jQuery Insert New Content
-
Auto hid Div
-
Jquery no conflict
-
JQuery Form validation
-
Html Form Validation
-
Login Form Validation
-
JQuery Fadeout Message
-
Jquery Modal popup
-
JQuery Ajax Form
-
Dynamic Dependent DropDown
-
Autocomplete list
-
Dynamic content load
-
Dynamic Star Rating
-
Drag and Drop Image Upload
-
show Hide Elements By click on checkbox
-
Add or Remove class in jquery
-
check Password strength
-
Count Remaining Character
-
check single or All checkboxes
-
Password match or not
-
Data Table
-
Date Picker
-
Multiselect Dropdown with Checkbox
-
Add Dynamic Input Field (Add More Input Field)
-
submit button disable after one click
-
Show hide password in Password textbox using checkbox
-
set content and value in html page
-
put value in the text field
-
sweet alert
-
Data-id
Most Popular Tutorials :-
Simply Easy Learning at Your Fingertips. Click Tutorials Menu to view More Tutorial List
DOM Manipulation in jquery
jQuery - DOM Manipulation
Content Manipulation
html( ) method :-
The html( ) method gets the html contents (innerHTML) of the first matched element.
syntax −
selector.html( )
Here .html() retrieves HTML content from the object and then .text( val ) method sets value of the object using passed parameter.
File name : index.php
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div").click(function () {
var content = $(this).html();
$("#result").text( content );
});
});
</script>
<style>
#division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on the square below:</p>
<span id = "result"> </span>
<div id = "division" style = "background-color:blue;">
This is Blue Square!!
</div>
</body>
</html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div").click(function () {
var content = $(this).html();
$("#result").text( content );
});
});
</script>
<style>
#division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on the square below:</p>
<span id = "result"> </span>
<div id = "division" style = "background-color:blue;">
This is Blue Square!!
</div>
</body>
</html>
DOM Element Replacement
You can replace a complete DOM element with the specified HTML or DOM elements. The replaceWith( content ) method serves this purpose very well.
syntax −
selector.replaceWith( content )
File name : index.php
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div").click(function () {
$(this).replaceWith("<h1>JQuery is Great</h1>");
});
});
</script>
<style>
#division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on the square below:</p>
<span id = "result"> </span>
<div id = "division" style = "background-color:blue;">
This is Blue Square!!
</div>
</body>
</html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div").click(function () {
$(this).replaceWith("<h1>JQuery is Great</h1>");
});
});
</script>
<style>
#division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on the square below:</p>
<span id = "result"> </span>
<div id = "division" style = "background-color:blue;">
This is Blue Square!!
</div>
</body>
</html>
Removing DOM Elements
The empty( ) method remove all child nodes from the set of matched elements where as the method remove( expr ) method removes all matched elements from the DOM.
syntax −
selector.remove( [ expr ])
or
selector.empty( )
File name : index.php
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div").click(function () {
$(this).remove( );
});
});
</script>
<style>
.div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on any square below:</p>
<span id = "result"> </span>
<div class = "div" style = "background-color:blue;"></div>
<div class = "div" style = "background-color:green;"></div>
<div class = "div" style = "background-color:red;"></div>
</body>
</html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div").click(function () {
$(this).remove( );
});
});
</script>
<style>
.div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on any square below:</p>
<span id = "result"> </span>
<div class = "div" style = "background-color:blue;"></div>
<div class = "div" style = "background-color:green;"></div>
<div class = "div" style = "background-color:red;"></div>
</body>
</html>
DOM Manipulation Methods
File name : index.php
1 after( content )
Insert content after each of the matched elements.
2 append( content )
Append content to the inside of every matched element.
3 appendTo( selector )
Append all of the matched elements to another, specified, set of elements.
4 before( content )
Insert content before each of the matched elements.
5 clone( bool )
Clone matched DOM Elements, and all their event handlers, and select the clones.
6 clone( )
Clone matched DOM Elements and select the clones.
7 empty( )
Remove all child nodes from the set of matched elements.
8 html( val )
Set the html contents of every matched element.
9 html( )
Get the html contents (innerHTML) of the first matched element.
10 insertAfter( selector )
Insert all of the matched elements after another, specified, set of elements.
11 insertBefore( selector )
Insert all of the matched elements before another, specified, set of elements.
12 prepend( content )
Prepend content to the inside of every matched element.
13 prependTo( selector )
Prepend all of the matched elements to another, specified, set of elements.
14 remove( expr )
Removes all matched elements from the DOM.
15 replaceAll( selector )
Replaces the elements matched by the specified selector with the matched elements.
16 replaceWith( content )
Replaces all matched elements with the specified HTML or DOM elements.
17 text( val )
Set the text contents of all matched elements.
18 text( )
Get the combined text contents of all matched elements.
19 wrap( elem )
Wrap each matched element with the specified element.
20 wrap( html )
Wrap each matched element with the specified HTML content.
21 wrapAll( elem )
Wrap all the elements in the matched set into a single wrapper element.
22 wrapAll( html )
Wrap all the elements in the matched set into a single wrapper element.
23 wrapInner( elem )
Wrap the inner child contents of each matched element (including text nodes) with a DOM element.
24 wrapInner( html )
Wrap the inner child contents of each matched element (including text nodes) with an HTML structure.
Insert content after each of the matched elements.
2 append( content )
Append content to the inside of every matched element.
3 appendTo( selector )
Append all of the matched elements to another, specified, set of elements.
4 before( content )
Insert content before each of the matched elements.
5 clone( bool )
Clone matched DOM Elements, and all their event handlers, and select the clones.
6 clone( )
Clone matched DOM Elements and select the clones.
7 empty( )
Remove all child nodes from the set of matched elements.
8 html( val )
Set the html contents of every matched element.
9 html( )
Get the html contents (innerHTML) of the first matched element.
10 insertAfter( selector )
Insert all of the matched elements after another, specified, set of elements.
11 insertBefore( selector )
Insert all of the matched elements before another, specified, set of elements.
12 prepend( content )
Prepend content to the inside of every matched element.
13 prependTo( selector )
Prepend all of the matched elements to another, specified, set of elements.
14 remove( expr )
Removes all matched elements from the DOM.
15 replaceAll( selector )
Replaces the elements matched by the specified selector with the matched elements.
16 replaceWith( content )
Replaces all matched elements with the specified HTML or DOM elements.
17 text( val )
Set the text contents of all matched elements.
18 text( )
Get the combined text contents of all matched elements.
19 wrap( elem )
Wrap each matched element with the specified element.
20 wrap( html )
Wrap each matched element with the specified HTML content.
21 wrapAll( elem )
Wrap all the elements in the matched set into a single wrapper element.
22 wrapAll( html )
Wrap all the elements in the matched set into a single wrapper element.
23 wrapInner( elem )
Wrap the inner child contents of each matched element (including text nodes) with a DOM element.
24 wrapInner( html )
Wrap the inner child contents of each matched element (including text nodes) with an HTML structure.
Previous Next
Trending Tutorials
Review & Rating
0.0 / 5
0 Review
5
(0)
4
(0)
3
(0)
2
(0)
1
(0)
Write Review Here
Most Popular Tutorials
-
Add Dynamic Input Field (Add More Input Field)
-
Document object model (DOM)
-
JQuery Ajax Form
-
show Hide Elements By click on checkbox
-
Count Remaining Character
-
check Password strength
-
JQuery Effects
-
check single or All checkboxes
-
Multiselect Dropdown with Checkbox
-
what is jquery
-
Drag and Drop Image Upload
-
put value in the text field
-
sweet alert
-
Jquery events
-
Dynamic Dependent DropDown
-
JQuery Fadeout Message
-
Password match or not
-
Autocomplete list
-
set content and value in html page
-
Login Form Validation
Important Link
-
How to manage Session in php Tutorials.
More ....... -
upcomming codeigniter and angular js tutorials.
Click here to see More ...
