JSFiddle - React, Tailwind, and code Playground

by rossmartin

HTML

<div data-role="page" id="page1">
    <div data-role="content">
        <div ID="myUL" class="nav">
            <ul data-role="listview" ID="ul" data-inset="true">
                <li><a href="acura.html">Acura</a>
                </li>
                <li><a href="audi.html">Audi</a>
                </li>
                <li><a href="bmw.html">BMW</a>
                </li>
            </ul>
        </div>
    </div>
</div>

JavaScript

$(function () {
    function changeListview(){
        $("#ul").children().remove('li');
        var length = 10;
        for (var i = 0; i < length; i++) {
            //create list item 
            var myList = document.getElementById("ul");
            var liSold = document.createElement("li");
            var aTag = document.createElement('a');
            //aTag.innerHTML = addressString[0];
            aTag.innerHTML = 'the world is a string';
            aTag.setAttribute('onClick', 'somefunction(i)');
            aTag.setAttribute('data-transition', 'slide');
            liSold.appendChild(aTag);
            myList.appendChild(liSold);
        }
        $('#ul').listview('refresh');
    }
    changeListview();
    changeListview();
    changeListview();
});