JQuery Add Functions

In addition to adding effects and animations to your webpage, JQuery Add functions allow us to add HTML to a webpage. The functions that add html content to the page are append(), prepend(), after() and before() methods. The following sections explain detail of each of these methods with a working example.

JQuery Append and Prepend functions

The append function adds the html at the end of the element but inside the element. For instance if you have a list of items and you to add item at the last index you can use the append() function. Similarly, to add html at the beginning of an html element, you can use the prepend() function. Take a look at the following example to understand how these functions work.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery Append/Prepend</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
     <script type = "text/javascript">
         $(document).ready(function() {
         $("#b1").click(function(){
           
             
            $('ol').prepend("<li>Fruit-abc</li>");
            
         });
             
        $("#b2").click(function(){
        
            $('ol').append("<li>Fruit-xyz</li>");
            
            
         });
           
         });
      </script>
  
</head>
    
<body>
    
   
    <h1> Here is a list of fruits</h1>
    <ol>
        <li>Banana</li>
        <li>Apple</li>
        <li>Orange</li>
        <li>Guava</li>
        <li>Peach</li>
    
    </ol>
    
    <button id="b1">Click to Prepend</button>
    <button id="b2">Click to append</button>
    
    
</body>

</html>

Download Code
Run Code

The above code contains a list of fruits followed by two buttons. The first button prepends list item at the beginning of the list on the other hand the second button appends the item at the end. Clicking a button fires an event which is handled by click event handler. Inside the event handler, prepend and append functions are called. The html for list item is passed to these functions to add items to the list. In addition to lists You can use append and prepend methods to add html to any element.

JQuery Before and After functions

The before() and after() JQuery functions add the html content after the element. This means that if we use before() method on “ol” element to add a list item, it will not be added inside the ul element unlike append, rather, it will be added before ul element. Similarly, the after function will add html content after the element. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery After/Before</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
     <script type = "text/javascript">
         $(document).ready(function() {
         $("#b1").click(function(){
           
             
            $('ol').before("<li>Fruit-abc</li>");
            
         });
             
        $("#b2").click(function(){
        
            $('ol').after("<li>Fruit-xyz</li>");
            
            
         });
           
         });
      </script>
  
</head>
    
<body>
    
   
    <h1> Here is a list of fruits</h1>
    <ol>
        <li>Banana</li>
        <li>Apple</li>
        <li>Orange</li>
        <li>Guava</li>
        <li>Peach</li>
    
    </ol>
    
    <button id="b1">Click to Add Before</button>
    <button id="b2">Click to Add After</button>
    
    
</body>

</html>

Download Code
Run Code

When you click the corresponding buttons you shall see that the list items are added before and after the ordered list rather than being added inside the list at the beginning and end which was the case with prepend and apppend functions.

<<< JQuery Set FunctionsJQuery Remove Elements >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .