Hello! Please help me solve the problem. I'm trying to create a dynamic list with scrolling. Here is the HTML part:

<div id="autocom" style="font-size: 24 px; position: absolute; float: left;" class="ui-widget"> <label for="tags">Остановка: </label> <input id="tags" type="text"/> <div id="bus_stop" style="position: relative; font-size: 24 px;"></div> </div> <div style="overflow: auto; float: left; position: relative; height: fit-content;" id="routes"> </div>

In JS, I set autocomplete for DIV with the autocom tag (I will not give the code, since it has no relation to the matter). So, after selecting an item from the list of auto-completion, I work out the following function:

 function hideshow() { if (label) { var routes = document.getElementById('routes'); routes.style.display == ''; var Buses = ["29", "2", "3", "4", "7", "10", "22"]; var div = "<div style=\"margin: 0 auto; width: 500px;\">"; var $div = "</div>"; var hr = "<hr>"; Buses.forEach(function(item, i, arr) { routes.innerHTML = hr + div + "Маршрут №" + item.toString() + " : " + "14:50" + hr + $div; }); }

Actually, I just want my dynamically created divs to be located under each other. And it turns out that: screen

    1 answer 1

    In the loop from the beginning, create the content, and then paste it into the html.

     var html = ''; Buses.forEach(function(item, i, arr) { html += hr + div + "Маршрут №" + item.toString() + " : " + "14:50" + hr + $div; }); routes.innerHTML = html;
    • Thank! It helped. - No_Com