title: Make a dynamically created form visible
body: <p>I have a table that gets populated with data from Firebase. Each tr shows that data. I have dynamically created a form that gets appended to each tr, the problem is that it is not showing and I can't figure out why. I inspected each tr with the dev tools and it shows that the form with the input is indeed there but for some reason it is not visible, why? Here is my html:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> const animalList = document.querySelector('#animal-list');
      const form = document.querySelector('#add-animals');
      
      
      function renderAnimals(doc) {
      let tr = document.createElement('tr');
      let deleteButton = document.createElement('button');
      let name = document.createElement('div');
      let species = document.createElement('div');
      let age = document.createElement('div');
      let last_fed = document.createElement('div');
      let last_shed = document.createElement('div');
      let diet = document.createElement('div');
      let basking_area_temp = document.createElement('div');
      let cold_part_temp = document.createElement('div');
      let humidity = document.createElement('div');
      let additional_info = document.createElement('div');
      
       // The form that does not become visible
  
      let form = document.createElement("form");
      
      form.setAttribute("method", "post");
      form.setAttribute("action", "default.aspx");
      form.setAttribute("target", "_blank");
      let inputField = document.createElement("input");
      
      inputField.setAttribute("name", "firtname");
      
      inputField.setAttribute("value","product1,product2" );
      
      inputField.setAttribute("type", "text");
      form.setAttribute("class", "f")
      
      form.appendChild(inputField);
      
      tr.setAttribute('data-id', doc.id);
      name.textContent = `name: ${doc.data().name}`
      deleteButton.textContent = 'Delete';
      deleteButton.setAttribute('class','btn btn-danger');
      species.textContent = `species: ${doc.data().species}`
      age.textContent = `age: ${doc.data().age}`
      last_fed.textContent = `last fed: ${doc.data().last_fed}`;
      last_shed.textContent = `last shed: ${doc.data().last_shed}`;
      diet.textContent = `diet: ${doc.data().diet}`;
      basking_area_temp.textContent =`basking area temp: ${ doc.data().basking_area_temp}`;
      cold_part_temp.textContent =  `cold part temp: ${doc.data().cold_part_temp}`;
      humidity.textContent = `humidity: ${doc.data().humidity}`;
      additional_info.textContent = `additional info: ${doc.data().additional_info}`;
      
      tr.appendChild(species);
      tr.append(name);
      tr.append(age);
      tr.append(last_fed);
      tr.append(last_shed);
      tr.append(diet);
      tr.append(basking_area_temp);
      tr.append(cold_part_temp);
      tr.append(humidity);
      tr.append(additional_info);
      tr.append(deleteButton);
      tr.append(form);
      
      animalList.appendChild(tr);
      
      
      //deleting data
      deleteButton.addEventListener('click', (event) =&gt; {
          event.stopPropagation();
          let id = event.target.parentElement.getAttribute('data-id');
          db.collection('animals').doc(id).delete();
      })
      
      }
      
      // getting data from the back end
      db.collection('animals').onSnapshot(snapshot =&gt; {
          let changes = snapshot.docChanges();
          changes.forEach(change =&gt; {
              if(change.type == 'added') {
                  renderAnimals(change.doc);
              } else if (change.type == 'removed') {
                  let li = animalList.querySelector('[data-id=' + change.doc.id + ']');
                  animalList.removeChild(li);
              }
          })
      })
      
      // adding data
      form.addEventListener('submit', (event) =&gt; {
          event.preventDefault();
          db.collection('animals').add({
              species: form.species.value,
              name: form.name.value,
              age: form.age.value,
              last_fed: document.querySelector('#last-fed').value,
              last_shed: document.querySelector('#last-shed').value,
              diet: form.diet.value,
              basking_area_temp: document.querySelector('#basking-area-temperature').value,
              cold_part_temp: document.querySelector('#cold-temperature').value,
              humidity: form.humidity.value,
              additional_info: document.querySelector('#additional-info').value
      
          })
      })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
      &lt;html&gt;
      
      &lt;head&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
          &lt;title&gt;Repti Care&lt;/title&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;script src="https://www.gstatic.com/firebasejs/5.5.7/firebase.js"&gt;&lt;/script&gt;
          &lt;script src="https://www.gstatic.com/firebasejs/5.5.5/firebase-app.js"&gt;&lt;/script&gt;
          &lt;script src="https://www.gstatic.com/firebasejs/5.5.5/firebase-firestore.js"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
          integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"&gt;
          &lt;link rel="stylesheet" href="./css/main.css"&gt;
          
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="jumbotron"&gt;
          &lt;div class="placeholder"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="container"&gt;
                  &lt;h2&gt;Add a new Animal&lt;/h2&gt;
          &lt;form class="form-group" id="add-animals"&gt;
          Species: &lt;input type="text" id="species" class="form-control"&gt;
          Name: &lt;input type="text" id="name" class="form-control" &gt;
          Age: &lt;input type="text" id="age" class="form-control"&gt;
          Last Fed: &lt;input type="date" id="last-fed" class="form-control"&gt;
          Last Shed: &lt;input type="date" id="last-shed" class="form-control"&gt;
          Diet: &lt;input type="text" id="diet" class="form-control"&gt;
          Basking area temperature: &lt;input type="text" id="basking-area-temperature" class="form-control"&gt;
          Cold part temperature: &lt;input type="text" id="cold-temperature" class="form-control"&gt;
          Humidity: &lt;input type="text" id="humidity" class="form-control"&gt;
          Addition Info: &lt;textarea class="form-control" id="additional-info"&gt;&lt;/textarea&gt;
          &lt;button id="btnCreate" class="btn btn-primary"&gt;Create&lt;/button&gt;
          &lt;/form&gt;
          &lt;h3&gt;View Current Animals&lt;/h3&gt;
          &lt;table id="animal-list"&gt;
           &lt;th&gt;Animals&lt;/th&gt;
          &lt;/table&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;script&gt;
        // Initialize Firebase
        var config = {
          apiKey: "AIzaSyBSuC8nqJzLe7d5jKS-_nE15kaI9Y6NIfI",
          authDomain: "repti-care-32176.firebaseapp.com",
          databaseURL: "https://repti-care-32176.firebaseio.com",
          projectId: "repti-care-32176",
          storageBucket: "repti-care-32176.appspot.com",
          messagingSenderId: "632910932105"
        };
        firebase.initializeApp(config);
        const db = firebase.firestore();
        db.settings({ timestampsInSnapshots: true }); 
      &lt;/script&gt;
      &lt;script
      src="https://code.jquery.com/jquery-3.3.1.js"
      integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
      crossorigin="anonymous"&gt;&lt;/script&gt;
      
          &lt;script src="./scripts/main.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>