title: How do I add fade on document.createElement?
body: <p>I am unsure of how to add a fade effect to the object created with document.createElement. I have tried
  different methods with no result. </p>
  
  <p>I am fairly new to JavaScript and could use some help. Does anyone have any 
  solution for this?</p>
  
  <p>Thanks in advance!</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;fieldset&gt;
  &lt;p id="drinkNameHeadline"&gt; Drink Name &lt;/p&gt;                          
  &lt;label for='drinkName'&gt;&lt;/label&gt;
  &lt;input id="drinkName" type="name" name="drinkName"&gt;
  &lt;p id="ingredients"&gt; Ingredients &lt;/p&gt;
  
  &lt;label for='ingredient'&gt;&lt;/label&gt;
  &lt;input id="textBar" type="name" name="ingredient"&gt;
  
  &lt;div id="textBarPosition"&gt;&lt;/div&gt;
  &lt;input id="addBar" type="button" value="Add Ingredient Bar"&gt;    
  
  &lt;input class="submit" type="submit" value="Submit"&gt;                     
  &lt;/fieldset&gt; 
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>function createSector() {
    var input = document.createElement('input'); input.setAttribute("id", 'textBar');
    input.type = 'text';
    input.name = 'name[]';
    return input;
  }
  
  var form = document.getElementById('textBarPosition');
  document.getElementById('addBar').addEventListener('click', function(e) {
    form.appendChild(createSector());
  });
  </code></pre>