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.

Features:

• 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="https://code.jquery.com/jquery-3.4.1.min.js" 
        integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh" 
        crossorigin="anonymous"></script>
<script src="js/appender.js"></script>

2. Define the content to duplicate.

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

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

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

  <label>
    Age
    <input type="text" name="age">
  </label>

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

</div>

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.

$("#appendHere").appender({
  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.

$("#appendHere").appender({
  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="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">

$("#appendHere").appender({
  addClass: 'animated bounceInLeft'
});

Changelog:

2022-06-28

• Update appender.js

2019-07-11

• 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.