title: How do I add a button to a td using js?
body: <p>I have a table that is generated on the fly, as it is generating its TDs, I want to set the first TD to be a button. Below is my code, obviously doesn't work. I remember from another problem I had that we can change the content of a div using the .html(), but that doesnt work here neither.</p>
  
  <p>Code:</p>
  
  <pre><code>    var table = document.getElementById("userinfo");
      var thead, tr, td;
      table.appendChild(thead = document.createElement("thead"));
      thead.appendChild(tr = document.createElement("tr"));
      tr.appendChild(td = document.createElement("td"));
      td.innerHTML = "Email";
      tr.appendChild(td = document.createElement("td"));
      td.innerHTML = "First Name";
      tr.appendChild(td = document.createElement("td"));
      td.innerHTML = "Last Name";
      tr.appendChild(td = document.createElement("td"));
      td.innerHTML = "Is Active?";
  
      for (var i in data)
      {
          tr = document.createElement("tr");
          tr.setAttribute("id", "row" + i);
          if (i%2 == 0)
          {
              tr.setAttribute("style", "background:white");
          }
  
          var entry = data[i];
          console.log(entry);
          table.appendChild(tr);
          tr.appendChild(td = document.createElement("td"));
          td.setAttribute("html", "&lt;input type=\"button\" class=\"btn\" value=\'" + entry.email + "\" onclick=\"" + chooseUser(entry) + "\"/&gt;");
          tr.appendChild(td = document.createElement("td"));
          td.innerHTML = entry.first_name;
          tr.appendChild(td = document.createElement("td"));
          td.innerHTML = entry.last_name;
          tr.appendChild(td = document.createElement("td"));
          td.innerHTML = entry.isActive;
      }
  </code></pre>