In This Blog, you are going to learn 4 useful methods of jQuery namely, append, prepend, before and methods. These methods are used to append new items at specific location as per requirement. you will find notes and source code of these 4 methods in this blog.
Append & Prepend Methods jQuery
- append()
- In jQuery, append method puts data inside an element at the last index.
- prepend()
- In jQuery, prepend method puts the prepending element at the first index.
Source Code Append Prepend jQuery
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Append Prepend</title>
</head>
<body>
<h1>Welcome To JQuery</h1>
<br><br>
<input type="button" value="Append" id="btn1">
<input type="button" value="Prepend" id="btn2">
<script src="JQuery.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("h1").append("<p>This is Append</p>");
});
$("#btn2").click(function(){
$("h1").prepend("<p>This is Prepend</p>");
});
});
</script>
</body>
</html>
Another Example Of Append And Prepend jQuery
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Append Prepend</title>
</head>
<body>
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Grapes</li>
</ol>
<br><br>
<input type="button" value="Append" id="btn1">
<input type="button" value="Prepend" id="btn2">
<script src="JQuery.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("ol").append("<li>New Item Append</li>");
});
$("#btn2").click(function(){
$("ol").prepend("<li>New Item Prepend</li>");
});
});
</script>
</body>
</html>
After And Before Methods jQuery
- After
- In jQuery, the after() method inserts specified content after the selected elements.
- Before
- In jQuery, the before() method inserts specified content in front of (before) the selected elements.
Above diagram explaining the working of append, prepend, before and after methods of jQuery, try to understand this diagram.
Source Code Before & After Methods jQuery
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div style="background-color:aqua; border:10px red ridge; width: 300px;">
<h1>JQuery</h1>
</div>
<br><br>
<input type="button" value="Append" id="btn1">
<input type="button" value="Prepend" id="btn2">
<input type="button" value="After" id="btn3">
<input type="button" value="Before" id="btn4">
<script src="JQuery.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("div").append("<p>This is Append</p>");
});
$("#btn2").click(function(){
$("div").prepend("<p>This is Prepend</p>");
});
$("#btn3").click(function(){
$("div").after("<p>This is After</p>");
});
$("#btn4").click(function(){
$("div").before("<p>This is Before</p>");
});
});
</script>
</body>
</html>
Click Below Link to Download Notes & Source Code Of This Blog
https://www.mediafire.com/file/13h80vmdjy70q6d/append+prepend+after+before.rar/file
No responses yet