ADVERTISEMENTS

How to add elements to DOM in jQuery

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

ADVERTISEMENTS