JSFiddle - React, Tailwind, and code Playground

by some

HTML

<ul id="birds">
  <li>Bald Eagle</li>
  <li>Falcon</li>
  <li>Condor</li>
  <li>Albatross</li>
  <li>Parrot</li>
</ul>

<button onclick="reverseContent1()">1</button>
<button onclick="reverseContent2()">2</button>
<button onclick="reverseContent3()">3</button>
<button onclick="reverseContent4()">4</button>

JavaScript

function reverseContent1(node) {
  var node = document.getElementById('birds');
  var idx = node.childNodes.length;
  while (idx--) node.appendChild(node.childNodes[idx]);
}

function reverseContent2(node) {
  var node = document.getElementById('birds');
  var idx = node.childNodes.length;
  var frag = document.createDocumentFragment();
    while (idx--) {frag.appendChild(node.childNodes[idx]);}
  node.appendChild(frag);
}

function reverseContent3(node) {
  var node = document.getElementById('birds');
  for(var idx = 0, bll = node.childNodes.length; idx < bll; idx++) {
    node.insertBefore(node.childNodes[idx], node.firstChild);
  }
}

function reverseContent4(node) {
  var node = document.getElementById('birds');
  var list = node.getElementsByTagName("li");
  for (var idx = list.length - 1; idx >= 0; idx--) {
    node.appendChild(list[idx]);
  }
}