Getting Started

The first step is to download ListExtender.js and import it along with any javascript using ListExtender into your html file.
Make sure you import ListExtender.js before any code that uses it.

<script defer type='text/javascript' src=''></script>

The next step is to create your ListExtender object.

const myList = new ListExtender()

Finally, append your list to some parent container in the DOM


And that's it! You now have a working extending list in your website!
From here you can customize the list however you see fit. A good place to start would be setting the placeholder and input type.

myList.setPlaceholder('Placeholder Text')



new ListExtender(options)

The ListExtender constructor takes an optional parameter, which is an options object. The properties of the options parameter determine the behaviour of the list.

The options object uses the following properties:

Property Default Value Description
isUnordered true Determines whether the list is unordered or not
allowReorder true Determines whether users can drag and drop list items
showDeleteButton false Determines whether the delete button shows on the list

All properties are optional and if not included will be replaced with the default value.


Name Description
element The ul/ol element displayed in the DOM
maxSize The maximum number of entries in the list
listSize The number of elements in the list
Various styles.. See styles tables below, use these to style your list!
delBtnThemes Built-in themes for the delete button


Method Name Params Returns Description
setInputType(type) type: string
Accepts following values:
none Sets the input type of list elements
setPlaceholder(placeholder) placeholder: string none Sets the input field placeholder for list elements
setMinLength(minLength) minLength: number none Sets the input field minimum length for list elements
setMaxLength(maxLength) maxLength: number none Sets the input field maximum length for list elements
setId(id) id: string none Sets the id of the list object
addClasses(classList) classList: array[string] none Applies the given classes to the list object
removeClasses(classList) classList: array[string] none Removes the given classes from the list object
addListItem() none none Adds a new item to the list
addValidation(callback, errorMessage) callback: function(value: string), errorMessage: string
errorMessage is optional, callback function will be passed a string
none Adds a validation function to the list object. When validating, if function returns true validation will pass, else validation fails
addFromArray(data) data: array[string] none Appends elements in data to the list
appendTo(query) query: string
A selector for querySelector
none Appends the list to the element matching query
addBefore(query) query: string
A selector for querySelector
none Places the list before the element matching query
addAfter(query) query: string
A selector for querySelector
none Places the list after the element matching query
getData() none array[string] Returns all validated entries in the list
getAllData() none array[string] Returns all entries in the list
setTheme(theme) theme: object
A theme object (see variables above)
none Sets the theme of the list to the given theme object
setDelBtnTheme(delBtnTheme) delBtnTheme: object
A theme object for delete buttons. See below for instructions on theming
none Sets the theme of the delete buttons in the list

Theme Specifications

Coming soon...