JQuery can read and manipulate the DOM of the HTML page using a set of simple methods.This is the fifth part of the series.The complete series is as under
- JQuery - A formal introduction using "Hello World"
- JQuery Selectors
- JQuery Traversal
- CSS with JQuery
- DOM with JQuery
- JQuery and Events
- Animated effects using JQuery
- JQuery and Ajax
- Custom JQuery Plugins
The text() method can read or write the text inside a given HTML element. Here is an example:
<head runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btn").click(function () {
var initialContent = $('p').text();
$('p').text("Content of the paragraph has changed");
})
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="parentDiv">
<p>This is a paragraph.</p>
<input type="button" id="btn" value="Click Me!"/>
</div>
</form>
</body>
The
var initialContent = $('p').text();
will return the text of the selected HTML element.
$('p').text("Content of the paragraph has changed")
In the above case the text("Content of the paragraph has changed") method takes a string parameter and replace the existing text of the HTML element, with the new, given text.
The html() method works much like the text() method, except the method returns the HTML of a given element, not just the text. Here is an example:
$(document).ready(function () {
$("#btn").click(function () {
var initialContent = $('p').html();
$('p').html("<b>Content of the paragraph has changed</b>");
})
});
The
var initialContent = $('p').html();
will return the HTML of the selected element.
$('p').html("<b>Content of the paragraph has changed</b>");
In the above case the html("<b>Content of the paragraph has changed</b>"); method takes a string parameter and sets the HTML of the selected element.
The val() method is used to get and set the value of form fields
$("#btn").click(function () {
var initialContent = $('#txt1').val();
alert(initialContent);
$("#txt1").val("now the content change")
})
The val() method that does not take parameters, is allowing to read the content of the textbox.
The val("now the content change") method will set a new content to the textbox.
The attr() function can read and write attributes of HTML elements
$("img").attr("height","600");
The above code will read the image "height" attribute value.
$("img").attr( {height:"600" });
The above code will set the image "height" attribute value.
The removeAttr() method is used to remove an attribute from an HTML element
$("img").removeAttr('height');
Removes the height attribute
The prepend() method inserts new HTML into the beginning of the selected HTML element
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btn").click(function () {
$('p').prepend("<b>This is prepended text</b>");
})
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="parentDiv">
<p>This is a paragraph.</p>
<input type="button" id="btn" value="Click Me!"/>
</div>
</form>
</body>
The result will be
The new HTML is concatenated with the HTML the element already had.
The append() method inserts new HTML into the end of the selected HTML element.
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btn").click(function () {
$('p').append("<b>This is append text</b>");
})
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="parentDiv">
<p>This is a paragraph.</p>
<input type="button" id="btn" value="Click Me!"/>
</div>
</form>
</body>
The result will be
The new HTML is concatenated with the HTML the element already had.
The remove() method removes the selected HTML element from the DOM. E.g.
$('#id').remove();
The clone() method clones the selected element, so we can insert a copy of it somewhere else in the DOM.
var clone = $('#id').clone();
clone.insertBefore('#nextElement');
For a complete list of JQuery Dom Manipulation functions please visit Manipulation
Hope that we have a fair idea by now about JQuery Dom Manipulation methods and their usage.If not, we will revisit it again and will go through it properly.We will proceed to the next section once we are through with the current one.Thanks for reading.The attached zip file contains all the examples being demonstrated here.