@!(data, className) @function header(){} @function body(){

# API: Add Element Dynamically

    <!-- hidden sort control -->
    <div
        id="hidden-sort-control"
        style="display: none"
        data-jplist-control="hidden-sort"
        data-group="group1"
        data-path=".title">
    </div>

    <!-- group #1 -->
    <div data-jplist-group="group1" id="group">

        <!-- item #1 -->
        <div data-jplist-item>
            <p>
                <b>Title:</b>
                <span class="title">ddd</span>
            </p>
        </div>

        <!-- item #2 -->
        <div data-jplist-item>
            <p>
                <b>Title:</b>
                <span class="title">aaa</span>
            </p>
        </div>

        <!-- item #3 -->
        <div data-jplist-item>
            <p>
                <b>Title:</b>
                <span class="title">ccc</span>
            </p>
        </div>

        <!-- item #4 -->
        <div data-jplist-item>
            <p>
                <b>Title:</b>
                <span class="title">bbb</span>
            </p>
        </div>
    </div>

    <script src="//cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>
    <script src="jplist.min.js"></script>
    <script>
        (function(){
            'use strict';

            //start jPList
            jplist.init();

            //find the elements group
            var group = document.getElementById('group');

            //create a new element
            const div = document.createElement('div');
            div.innerHTML = '<div data-jplist-item><span class="title">a111</span></div>';

            //add element to the group
            group.appendChild(div);

            //refresh jPList
            jplist.refresh();
        })();
    </script>
    </html>

} @render(process.cwd() + '/build/site/layouts/documentation.html', data, 'Add Element API', header, body, 'api', 'api-add-element')