Kloner

A tiny, dependency-free JavaScript module for cloning/repeating elements.

Installation #

Manual Download #

Download dist/kloner.min.js and place the following HTML in your page’s head element:

<script type="text/javascript" src="dist/kloner.min.js"></script>

CDN (Courtesy of jsDelivr) #

Place the following HTML in your page’s head element (check to make sure the version in the URL is the version you want):

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/fivefifteen/[email protected]/dist/kloner.min.js"></script>

NPM #

npm install kloner --save

// ES6
import kloner from 'kloner'

// CommonJS
const kloner = require('kloner')

Fetcher #

fetcher install fivefifteen/kloner --save

Bower #

bower install fivefifteen/kloner --save

Usage #

`kloner` Function #

kloner([containerSelector], [childSelector], [options])

Initializes Kloner.

Parameters #

containerSelector (Optional) –
childSelector (Optional) –
options (Optional) –

Examples #

window.addEventListener('load', function () {
  kloner()
})

Options #

{
  afterAdd: null,
  afterChildUpdate: null,
  afterRemove: null,
  beforeAdd: null,
  beforeChildUpdate: null,
  beforeRemove: null,
  childSelector: '[data-kloner-template], :scope > *',
  containerSelector: '[data-kloner], .kloner',
  max: null,
  min: 0,
  parameters: null,
  start: 0,
  template: null,
  updateChildren: false
}