jQuery also provides a set of utility function that can be used for various purpose such as, manipulating array, string, and number, manipulating the DOM , making ajax request and more. For adding new elements to DOM, we have two predefined functions of jquery i.e. append
and prepend
which we will use for adding in front and end of selected element.
The following example will explain about jQuery's append
and prepend
functions on selected DOM elements of HTML page. You can easily copy it and use with your own code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Add Elements to DOM with jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("btn").click(function(){
$("ol").prepend("<li>FIRST item</li>");
$("ol").append("<li>LAST item</li>");
});
});
</script>
</head>
<body>
<button class="btn">Add item in front and end</button>
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</body>
</html>
Supported Browsers:
- Internet Explorer
- Mozilla Firefox
- Google Chrome
- Opera
- Safari
jQuery is a javascript library language used to perform the action on DOM elements of HTML webpages. You can learn jquery from our Jquery Tutorials and Jquery Examples