JSFiddle - React, Tailwind, and code Playground

by techiedelight

HTML

<html>
  <body>
    <div id="container"></div>
    <br>
    <div>
      <button id="generate">Generate</button>
    </div>
  </body>
</html>

CSS

label {
  font-size: 1rem;
  font-family: sans-serif;
  padding-right: 10px;
}

button,
select {
  font-size: .9rem;
  padding: 2px 5px;
}

JavaScript

document.getElementById('generate').onclick = function() {

  var values = ["dog", "cat", "parrot", "rabbit"];

  var select = document.createElement("select");
  select.name = "pets";
  select.id = "pets"

  for (const val of values) {
    var option = document.createElement("option");
    option.value = val;
    option.text = val.charAt(0).toUpperCase() + val.slice(1);
    select.appendChild(option);
  }

  var label = document.createElement("label");
  label.innerHTML = "Choose your pets: "
  label.htmlFor = "pets";

  document.getElementById("container").appendChild(label).appendChild(select);
}