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>';

        //refresh jPList content
        jplist.resetContent(function(){

            //add element to the group
            group.appendChild(div);
        });
    })();
</script>
</html>