JQuery

How to create an unordered list by iterating an array?

How to create an unordered list by iterating an array?, someone asked me to explain?
By:

We are creating an unordered list using jQuery by iterating in an array and store it in a local variable by appending. Finally we have pushed in to the DOM using html() property. This is the best way to fill the unordered list without reflow .

Example:

<html>
<head>
    <title>create anunordered list by iterating an array</title>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(function () {
            var mobiles = ['Apple', 'Samsung', 'Nokia', 'Micromax', 'Sony'];
            var listElement = $('#myList');
            var strDOM = '';
            for (var i = 0; i <mobiles.length; i++) {
               strDOM += '<li>' + mobiles[i] + '</li>';
            }
           listElement.html(strDOM);
        });
    </script>
</head>
<body style="border: 1px solid #DED8D8; width: 500px; height: 250px; font-family: Arial;">
   <h2 style="color: #FF5722;">create an unordered list byiterating an array</h2>
   <ul id="myList">
    </ul>
</body>
</html> 

Output:

create an unordered list by iterating an array

Related Article

Post your comments / questions



Recent Article