title: Add span above html input with JavaScript
body: <p>I've got an <code>html</code> input in a <code>div</code> that looks like this:</p>
  
  <pre><code>&lt;input type="text" class="form-control" placeholder="Barcode" role="barcode"&gt;
  </code></pre>
  
  <p>Using only JavaScript I need to add this into the DOM above it:</p>
  
  <pre><code>&lt;span class="input-group-btn"&gt;&lt;a class="btn btn-default" href="#"&gt;&lt;i class="fa fa-barcode"&gt;&lt;/i&gt; Scan&lt;/a&gt;&lt;/span&gt;
  </code></pre>
  
  <p>So the end result is:</p>
  
  <pre><code>&lt;div class="input-group"&gt;
      &lt;span class="input-group-btn"&gt;&lt;a class="btn btn-default" href="#"&gt;&lt;i class="fa fa-barcode"&gt;&lt;/i&gt; Scan&lt;/a&gt;&lt;/span&gt;
      &lt;input type="text" class="form-control" placeholder="Barcode" role="barcode"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I can't use <code>appendChild</code> on the div as the <code>input-group</code> class is not unique.</p>
  
  <p>This is the JavaScript I've tried with no luck:</p>
  
  <pre><code>var barcodeField=document.querySelectorAll('[role=barcode]');
  var span=document.createElement('span');
  span.class='input-group-btn';
  var scanButton=document.createElement('a');
  scanButton.class='btn btn-default';
  var linkText=document.createTextNode('Scan');
  scanButton.href='#';
  var i=document.createElement('i');
  i.class='fa fa-barcode';
  scanButton.appendChild(i);
  scanButton.appendChild(linkText);
  span.appendChild(scanButton);
  barcodeField[0].appendChild(span);
  </code></pre>
  
  <p>For starters it adds it below the input (I know this is due to <code>appendChild</code> but <code>appendParent</code> doesn't exist and I just wanted to get it working). Also it appears to ignore the classes I've given each element, but the biggest problem is nothing shows up on the page.</p>
  
  <p>The page is also using <code>Bootstrap</code> and <code>JQuery</code>.</p>