• jQuery Video Tutorials

jQuery append() Method

Previous
Quiz

The append() method in jQuery is used to insert content at the end of each element in the set of matched elements.

This method accepts a parameter named "content", which can be a HTML element, DOM element, or a jQuery object.

If we want to insert content at the beginining of the the selected elements, we need to use the prepend() method.

Syntax

Following is the syntax of append() method in jQuery −

$(selector).append(content,function(index,html))

Parameters

This method accepts the following parameters −

  • content: The content to be appended. This can be HTML elements, DOM elements, or jQuery objects representing elements.
  • function(index,html): (optional) A callback function that executes for each element appended.
  • index: The index of the currently processed element.
  • html: The HTML content of the currently processed element.

Example 1

In the following example, we are using the append() method to insert a HTML element (<li>) list item into an ordered list (<ol>) −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $('button').click(function(){
      $('ol').append('<li>New list item appended!</li>');
    })
  });
</script>
</head>
<body>
  <ol>
    <li>List item.</li>
    <li>List item.</li>
  </ol>
<button>Click to add</button>
</body>
</html>

After clicking the button, the append() method adds a new list element (<li>) at the end of ordered list.

Example 2

In this example, we are using DOM methods to create a <li> element and inserting into an ordered list −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $('button').click(function(){
     const newlist = document.createElement('li');
     newlist.textContent = 'New list item appended!';
     $('ol').append(newlist);
    })
  });
</script>
</head>
<body>
  <ol>
    <li>List item.</li>
    <li>List item.</li>
  </ol>
<button>Click to add</button>
</body>
</html>

When the button is clicked, the new <li> element will insert into the ordered list.

Example 3

Here, we are creating a jQuery object representing a <li> element, and then inserts it into the ordered list −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $('button').click(function(){
      $('ol').append($('<li>New list item appended!</li>'));
    })
  });
</script>
</head>
<body>
  <ol>
    <li>List item.</li>
    <li>List item.</li>
  </ol>
<button>Click to add</button>
</body>
</html>

After clicking the button, the append() method adds a new list element (<li>) at the end of ordered list.

Example 4

In this example, we are passing a callback function as an argument to the append() method. This function will be executed when append() is called, and it appends a new list element into the ordered list −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $('button').click(function(){
      $('ol').append(function(){
        return '<li>New list item appended!</li>';
      });
    })
  });
</script>
</head>
<body>
  <ol>
    <li>List item.</li>
    <li>List item.</li>
  </ol>
<button>Click to add</button>
</body>
</html>

When the button is clicked, the new <li> element will insert into the ordered list.

jquery_ref_html.htm
Print Page
Previous
Next