There is a code:

ref.on("child_added", function(snapshot, prevChildKey) { var order = snapshot.val(); //выводим заказы var ul = document.getElementById('orders'); docfrag = document.createDocumentFragment(); var div = document.createElement("div"); div.className = "col-md-2 col-masonry product"; //div.style.position = "relative"; div.innerHTML = '<h5 class="product-title">' + order.name +'</h5><br>'+ order.phone +'<br>'; docfrag.appendChild(div); ul.appendChild(docfrag); });

Which brings new data to the bottom of the page, how to make it output new data to the top and not to the bottom of the page?

    1 answer 1

    Simplified view:

     var ul = document.getElementById('myUl'); var div = document.createElement("div"); //div.style.position = "relative"; div.innerHTML = '<li>Some before text</li>'; ul.insertBefore(div, ul.children[0]); 
     <ul id="myUl"> <li>1</li> <li>2</li> <li>3</li> </ul>

    Index 0 in the string ul.insertBefore(div, ul.children[0]); talks about how to insert new elements before.

    Documentation link