JSFiddle - React, Tailwind, and code Playground

by WimStienstra

HTML

<ul id="myList">
  <li>File</li>
  <li>Left align</li>
  <li>Middle align</li>
  <li>Right align</li>
  <li>Ordered List</li>
</ul>


<button onclick="myFunction()">Try it</button>

JavaScript

function myFunction() {
  var list = document.getElementById("myList");
  var selectList = document.createElement("SELECT");
  var array = [list.childNodes[3], list.childNodes[4], list.childNodes[5]];

  selectList.id = "justifySelect";
  list.removeChild(list.childNodes[3]);  
  list.removeChild(list.childNodes[4]);
  list.removeChild(list.childNodes[5]);
  list.insertBefore(selectList, list.childNodes[2]);

  //Create and append the options
  for (var i = 0; i < array.length; i++) {
      var option = document.createElement("option");
      option.value = array[i];
      option.text = array[i];
      selectList.appendChild(option);
  }
}