Easy List Manipulation JavaScript Library – ListExtender.js

Category: Javascript | February 10, 2021
Author: JLambertazzo
Views Total: 23 views
Official Page: Go to website
Last Update: February 10, 2021
License: MIT


Easy List Manipulation JavaScript Library – ListExtender.js


ListExtender.js is a simple list manipulation JavaScript library that can be used to add, remove, edit, sort, validate, get items in a list view.


  • Double click list items to edit.
  • Add new list items with an input field.
  • Sort list items via drag and drop.
  • Optional Delete button for each list item.
  • 8 themes.

How to use it:

1. Load the ListExtender JavaScript library in the HTML.

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

2. Create a new instance of the List Extender.

const myList = new ListExtender();

3. Insert the list into your content.

myList.addAfter('#myList h2');

4. Set the placeholder of the input field.

myList.setPlaceholder('Type something here!');

5. Set the initial list items using the addFromArray method.

myList.addFromArray(['CSSScript', 'jQueryScript', 'Google.com', 'Facebook.com']);

6. Apply a custom validator to the list.

myList.validateList.addValidation(value => {
  return (value.match(/\d{4}-\d{2}-\d{2}/) && value.match(/\d{4}-\d{2}-\d{2}/)[0] === value) ||
  (value.match(/\d{2}\/\d{2}\/\d{4}/) && value.match(/\d{2}\/\d{2}\/\d{4}/)[0] === value) ||
  (value.match(/\d{8}/) && value.match(/\d{8}/)[0] === value)
}, 'Please follow specified format!!')

7. Set the list theme. Available themes:

  • simpleLight
  • simpleDark
  • cream
  • hacker
  • underwater
  • MLA
  • PuTTY
  • emoji

8. Available options.

const myList = new ListExtender({

      // is unordered list
      isUnordered: true,

      // allows sortable
      allowReorder: true,

      // shows delete button
      showDeleteButton: false,

9. More API methods.

// set the input type:
// 'text'
// 'email'
// 'password'
// 'date'
// 'month'
// 'number'
// 'time'
// 'url'
// 'week'

// set the minimum length of the input field

// set the maximum length of the input field

// apply a unique ID to the lsit

// apply additional CSS classes to the list

// remove CSS classes from the list

// add a new item to the list

// append the list before the element

// get data

You Might Be Interested In:

Leave a Reply