Description:
In this article,
I will explain how to use append() and prepend() method in Jquery.
If we want to
insert data at the beginning, we can use prepend() method. If we want to add
data at the end, we can use append() method.
append()- Add
data to an element at last index
prepend()- Add
data to an element at first index
If you want to add
data to the elements based on some event, you can do by the following ways. In the
following example, I am adding and removing values based on click event. Here,
I am adding data to the elements using append () and prepend () method.
Example Program:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnAppend').click(function () {
$('p').append('Appended Text Added
with Paragraph');
return false;
});
$('#btnPrepend').click(function () {
$('p').prepend('Prepended Text Added
with Paragraph');
return false;
});
$('#btnAppendDD').click(function () {
$('#ddlCountry').append($('<option></option>').val('England').html('England'));
return false;
});
$('#btnPrependDD').click(function () {
$('#ddlCountry').prepend($('<option></option>').val('Africa').html('Africa'));
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>
This is sample text</p>
<asp:Button ID="btnAppend" runat="server" Text="Append Text" />
<asp:Button ID="btnPrepend" runat="server" Text="Prepend Text" />
<asp:DropDownList ID="ddlCountry" runat="server">
<asp:ListItem>India</asp:ListItem>
<asp:ListItem>Pakistan</asp:ListItem>
<asp:ListItem>Australia</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="btnAppendDD" runat="server" Text="Append DD" />
<asp:Button ID="btnPrependDD" runat="server" Text="Prepend DD" />
</div>
</form>
</body>
</html>
-
0 comments:
Post a Comment