Append Any Content To An Element With Animations - jQuery Appender

File Size: 19.3 KB
Views Total: 3673
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Append Any Content To An Element With Animations - jQuery Appender

Appender is a tiny jQuery plugin to extend the append() method that allows the user to insert any element (or a group of elements) into your webpage with custom animations.

A typical use of the plugin is to duplicate & remove form fields/groups by clicking add/remove buttons.


  • Fade & slide animations.
  • Custom animations using 3rd animation library.
  • Shows row numbers.
  • Custom remove button.

How to use it:

1. Insert the JavaScript appender.js after loading jQuery library.

<script src="" 
<script src="js/appender.js"></script>

2. Define the content to duplicate.

<div class="row_container">
  <p class="row-number"></p>

    First Name
    <input type="text" name="fname">

    Last Name
    <input type="text" name="lname">

    <input type="text" name="age">

  <button class="delete-btn">Delete</button>


3. Create a container element to place the duplicated content.

<div id="appendHere"></div>

4. Create an Append button to append the content into the container you just created.

<button class="add-new-item">Append</button>

5. Invoke the plugin with options.

  rowSection: '.row_container',
  addBtn: '.add-new-item',
  appendEffect: 'fade', // or 'slide'
  rowNumber: '.row-number',
  deleteBtn: '.delete-btn'

6. Determine whether to hide the original content.

  hideSection: true

7. Apply a custom animation to the element. In this example, we're going to use Animate.css for the CSS3 animations.

<link rel="stylesheet" href="">
  addClass: 'animated bounceInLeft'



  • Update appender.js


  • optional delete button


This awesome jQuery plugin is developed by amiryxe. For more Advanced Usages, please check the demo page or visit the official website.