JQuery DOM Manipulation methods
JQuery provides methods to manipulate DOM in efficient way. You do not need to write big code to modify the value of any elements attribute or to extract HTML code from a paragraph or division.
JQuery provides methods such as .attr(), .html(), and .val() which act as getters, retrieving information from DOM elements for later use.
Content Manipulation:
The html() method gets the html contents (innerHTML) of the first matched element. Here is the syntax for the method:
selector.html()
Example: Following is an example which makes use of .html() and.text(val) methods. Here .html() retrieves HTML content from the object and then .text(val) method sets value of the object using passed parameter:
<html>
<head>
<title>
The jQuery Example
</title>
<script type=”text/javascript”
src=”/jquery/jquery-1.3.2.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 replace with (content) method serves this purpose very well. Here is the syntax for the method:
selector.replaceWith ( .content )
Here content is what you want to have instead of original element. This could be HTML or simple text.
Example: Following is an example which would replace division element with “<h1>JQuery is Great</h1>”:
<html>
<head>
<title>The jQuery Example</title>
<script type=”text/javascript”
src=”/jquery/jquery-1.3.2.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
There may be a situation when you would like to remove one or more DOM elements from the document. JQuery provides two methods to handle the situation.
The empty() method remove all child nodes from the set of matched elements whereas the method remove (expr) method removes all matched elements from the DOM. Here is the syntax for the method:
selector.remove([expr])
or
selector.empty()
You can pass optional parameter expr to filter the set of elements to be removed.
Example: Following is an example where elements are being removed as soon as they are clicked:
<html>
<head>
<title>The title</title>
<script type=”text/javascript”
src=”/jquery/jquery-1.3.2.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 the 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>
Inserting DOM elements
There may be a situation when you would like to insert new one or more DOM elements in your existing document. JQuery provides various methods to insert elements at various locations.
The after( content ) method insert content after each of the matched elements whereas the method before( content ) method inserts content before each of the matched elements. Here is the syntax for the method:
selector.after( content )
or
selector.before( content )
Here content is what you want to insert. This could be HTML or simple text.
Example: Following is the example where <div> elements are being inserted just before the clicked element.
<html>
<head>
<title>The title</title>
<script type=”text/javascript”
src=”/jquery/jquery-1.3.2.min.js”></script>
<script type=”text/javascript” language=”javascript”>
$(document).ready(function () {
$(“div”).click(function () {
$(this).before(‘<div class=”div”></div>’);
});
});
</script>
<style>
.div
{
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 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>
Comments/Suggestions are invited. Happy coding......!
Comments Post a Comment