how to dynamically create ul and li elements by for loop in javascript

Question

I am trying to create ul and li element in my codes by using javascript. my javascript code :

 for (var i =0;i<locations.length;i++)
 {
     //how to dynamic create ul and li code as follow ul and li code?????

     }

ul and li code :

<li>
        <label for="Device"><SCRIPT LANGUAGE="JavaScript">  document.write("show javascript value like the the locations[i]")  </SCRIPT></label> <input type="checkbox" id="Device" /> 
        <ol>
            <li class="file"><a href="">File 1</a></li>
            <li>
                <label for="subfolder2">Subfolder 1</label> <input type="checkbox" id="subfolder2" /> 
                <ol>
                    <li class="file"><a href="">Subfile 1</a></li>
                    <li class="file"><a href="">Subfile 2</a></li>
                    <li class="file"><a href="">Subfile 3</a></li>
                    <li class="file"><a href="">Subfile 4</a></li>
                    <li class="file"><a href="">Subfile 5</a></li>
                    <li class="file"><a href="">Subfile 6</a></li>
                </ol>
            </li>
        </ol>
    </li>

see: developer.mozilla.org/en-US/docs/Web/API/document.createElement — Sudhir Bastakoti
– Sudhir Bastakoti, Commented Apr 15, 2014 at 4:05

Soundar · Accepted Answer · 2014-04-15 04:17:19Z

9

Check here...

Script:

var ul = document.createElement("ul");
document.body.appendChild(ul);

for (var i = 1; i <= 10; i++)
{
    var li = document.createElement("li");  
    li.className = "file";

    var a = document.createElement("a");
    a.innerHTML = "Subfile " + i;

    li.appendChild(a);
    ul.appendChild(li);
}

like this you can create your desired order..

answered Apr 15, 2014 at 4:17

Soundar

2,5891 gold badge18 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gopal Joshi · Accepted Answer · 2014-04-15 04:27:13Z

Please check Example

HTML

<li>
        <label for="Device"><SCRIPT LANGUAGE="JavaScript">  document.write("show javascript value like the the locations[i]")  </SCRIPT></label> <input type="checkbox" id="Device" /> 
        <ol>
            <li class="file"><a href="">File 1</a></li>
            <li>
                <label for="subfolder2">Subfolder 1</label> <input type="checkbox" id="subfolder2" /> 
                <div id='mi'></div>
            </li>
        </ol>

    </li>

JS

var text = '<ol>';
    for (var i =0;i<6;i++)
    {

             text = text + "<li class='file'><a href=''>Subfile " + i + "</a></li>";

    }
 text = text +'</ol>';

document.getElementById('mi').innerHTML=text;

Here i have put <LI> in for loop in js and store it to variable then set it on div html.

WASasquatch · Accepted Answer · 2014-04-15 04:27:49Z

-1

I just answered a similar question, earlier, take a look at my example here using some of jQueries effects.

var list = $('#theList li:last-child'),
    limit = 20,
    current = 0;

function rand() {
    return Math.random().toString(36).substr(2); // Just for some random contnt
}

$('#trigger').click(function() { // We're using a static button to start the population of the list
        var end = setInterval(function() {
            if ( current == limit ) {
                current = 0;
                clearInterval(end);
            }
            list.append('<li style="display:none;color:green;">' + rand() + '</li>');
            var newList = $('#theList li:last-child');
            newList.fadeIn();
            var colorEnd = setInterval(function() {
                    newList.css('color', 'black');
                    clearInterval(colorEnd);
            }, 350);
            current =  current + 1;
        }, 300);
});

answered Apr 15, 2014 at 4:27

WASasquatch

1,0443 gold badges11 silver badges19 bronze badges

1 Comment

showtime Over a year ago

he asked for Javascript not jQuery

Collectives™ on Stack Overflow

how to dynamically create ul and li elements by for loop in javascript

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related