jquery append() and prepend()
jQuery append() method
The jQuery append() method to insert content at the end of the selected HTML elements.
$("ol").append("<li>New Item</li>");
<ol>
<li>Itel 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
The above code will append an item to the list, meaning that the new item will be inserted as the last item.
Browser View- Item 1
- Item 2
- Item 3
<html>
<head>
<title>jQuery append() methos example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#btn").click(function(){
$("ol").append("<li>New Item</li>");
});
});
</script>
</head>
<body>
<button id="btn">Append Item</button>
<ol>
<li>Itel 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</body>
</html>
jQuery prepend()
The jQuery prepend() method inserts specified content at the beginning of the selected elements.
$("ol").prepend("<li>New Item</li>");
<ol>
<li>Itel 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Browser View- Itel 1
- Item 2
- Item 3
The above code will prepend an item to the list, meaning that the new item will be inserted at the beginning of the list.
Full Source
<html>
<head>
<title>jQuery prepend() method example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#btn").click(function(){
$("ol").prepend("<li>New Item</li>");
});
});
</script>
</head>
<body>
<button id="btn">Prepend</button>
<ol>
<li>Itel 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</body>
</html>
Related Topics