[Solved] How to create dynamic nested divs within ul li tag using jquery

by


First, give the ui a id, i choose rootEl

<ui id="rootEl">
</ui>

Second, this JavaScript:

var rootEl = document.getElementById('rootEl');

function appendStuff() {
    var listItem = document.createElement('li');
    var videoThumbnail = document.createElement('div');
    var myImage = document.createElement('img');
    var videoDesc = document.createElement('div');
    var videoDate = document.createElement('div');
    videoThumbnail.setAttribute('class','videoThumbnail');
    myImage.src = "https://stackoverflow.com/questions/28105063/./img6.jpg";
    videoDesc.setAttribute('class','videoDesc');
    videoDate.setAttribute('class','videoDate');
    videoDesc.innerHTML = "Lorem ipsum dolor sit amet";
    videoDate.innerHTML = "02/07/2012";

    videoThumbnail.appendChild(myImage);
    videoThumbnail.appendChild(videoDesc);
    videoThumbnail.appendChild(videoDate);
    listItem.appendChild(videoThumbnail);

    rootEl.appendChild(listItem);
}

finally, a button to create that stuff and append it

<button onclick="appendStuff()">click me</button>

Now, every time you click that Button, you will append that stuff, if you doesnt want to have it multiple times you can modify my function to display other data or just make the button invisible or disable it I please you to ask google before you ask here.

solved How to create dynamic nested divs within ul li tag using jquery