Hints
append() used to add element inside an element in forward.
Example: 1 Explain append() function,In which numbers add into element from 1 to 5 in forward.
prepend() used to add element inside an element in backward.
Example: 2 Explain prepend() function,In which numbers add into element from 5 to 1 in backward.
|
Example: 1 Explain append() function,In which numbers add into element from 1 to 5 in forward
<html>
<head>
<title>HTML-JQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var numbers = 5;
for (var i = 1; i <= numbers; i++) {
$("#divPages").append('<div class="page">' + i + '</div>');
}
});
</script>
<style>
#divPages {
float: left;
}
#divPages div {
float: left;
margin: 5px 10px;
}
</style>
</head>
<body>
<div id="divPages"></div>
</body>
</html>
|
Example: 1 Demo
|
Example: 2 Explain prepend() function,In which numbers add into element from 5 to 1 in backward
<html>
<head>
<title>HTML-JQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var numbers = 5;
for (var i = 1; i <= numbers; i++) {
$("#divPages").prepend('<div class="page">' + i + '</div>');
}
});
</script>
<style>
#divPages {
float: left;
}
#divPages div {
float: left;
margin: 5px 10px;
}
</style>
</head>
<body>
<div id="divPages"></div>
</body>
</html>
|
Example: 2 Demo
|