Add new list item dynamically to web page
<p>Is there a way to add new list items in HTML automatically by getting the data of these list items from a web page.
The list is like this:</p>

<pre><code>&lt;ol class="treeBody"&gt;
        &lt;li&gt;
            &lt;label for="folder1"&gt;&lt;span id="albumname"&gt;0&lt;/span&gt;&lt;/label&gt; &lt;input type="checkbox" id="albumname" /&gt;
            &lt;ol&gt;
                &lt;li&gt;
                    &lt;label for="subfolder1"&gt;&lt;span id="subdirname"&gt;0&lt;/span&gt;&lt;/label&gt; &lt;input type="checkbox" id="subdirname" /&gt;
                    &lt;ol&gt;
                        &lt;li class="file"&gt;&lt;a href=""&gt;File 1&lt;/a&gt;&lt;/li&gt;
                    &lt;/ol&gt;
                &lt;/li&gt;
            &lt;/ol&gt;
        &lt;/li&gt;
    &lt;/ol&gt;
</code></pre>

<p>I get the data using websocket:</p>

<pre><code>$.get("http://localhost:8040/api/album", function (data) {
        console.log("data: ", data);
        var i;
        var j;
        console.log(i);
        for (i = 0; i &lt; data.length; i++) {
            console.log("start for loop");
            var albname = data[i].Name;
            console.log("albname: ", albname);
            $("#albumname").text(albname);
            var subalbum = data[i].SubAlbums
            for (j = 0; j &lt; subalbum.length; j++) {
                var subname = data[i].SubAlbums[j];
                console.log("SubName: ", subname);
                $("#subdirname").text(subname);
            }
        }
    });
</code></pre>