Add span above html input with JavaScript

Question

I've got an html input in a div that looks like this:

<input type="text" class="form-control" placeholder="Barcode" role="barcode">

Using only JavaScript I need to add this into the DOM above it:

<span class="input-group-btn"><a class="btn btn-default" href="#"><i class="fa fa-barcode"></i> Scan</a></span>

So the end result is:

<div class="input-group">
    <span class="input-group-btn"><a class="btn btn-default" href="#"><i class="fa fa-barcode"></i> Scan</a></span>
    <input type="text" class="form-control" placeholder="Barcode" role="barcode">
</div>

I can't use appendChild on the div as the input-group class is not unique.

This is the JavaScript I've tried with no luck:

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);

For starters it adds it below the input (I know this is due to appendChild but appendParent 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.

The page is also using Bootstrap and JQuery.

Give it an ID as well as a class?

Danny B
– Danny B

2015-10-06 12:46:03 +00:00
Commented Oct 6, 2015 at 12:46 — Danny B
– Danny B, Commented Oct 6, 2015 at 12:46

Arun P Johny · Accepted Answer · 2015-10-06 12:47:54Z

5

You can't use appendChild() as input element can't have descendants, since you want to insert the span before the input element, you can use insertBefore()

var barcodeField = document.querySelector('[role=barcode]');
var span = document.createElement('span');
span.className = 'input-group-btn';
var scanButton = document.createElement('a');
scanButton.className = 'btn btn-default';
var linkText = document.createTextNode('Scan');
scanButton.href = '#';
var i = document.createElement('i');
i.className = 'fa fa-barcode';
scanButton.appendChild(i);
scanButton.appendChild(linkText);
span.appendChild(scanButton);
barcodeField.parentNode.insertBefore(span, barcodeField);

<div class="input-group">
  <input type="text" class="form-control" placeholder="Barcode" role="barcode">
</div>

Also instead of creating the entire html structure using javascript you can

var barcodeField = document.querySelector('[role=barcode]');
var span = document.createElement('span');
span.className = 'input-group-btn';
span.innerHTML = '<a class="btn btn-default" href="#"><i class="fa fa-barcode"></i>Scan</a>'
barcodeField.parentNode.insertBefore(span, barcodeField);

<div class="input-group">
  <input type="text" class="form-control" placeholder="Barcode" role="barcode">
</div>

answered Oct 6, 2015 at 12:47

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chris Byatt Over a year ago

Thanks - this works. I was using querySelectorAll as the role shows up multiple times on a page and it needs to be added to every element, but I guess I can just wrap up the span creation in a function and loop through the results for barcodeField and run the function for each input?

Arun P Johny Over a year ago

@ChrisByatt didn't see you are using jQuery... it is much simpler with that

J Santosh · Accepted Answer · 2015-10-06 12:53:24Z

0

use insertBefore like $('html to insert').insertBefore('element before which the html has to be inserted')

$('<span class="input-group-btn"><a class="btn btn-default" href="#"><i class="fa fa-barcode"></i> Scan</a></span>').insertBefore('#txtbox')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="input-group">
  <input id='txtbox' type="text" class="form-control" placeholder="Barcode" role="barcode" />
</div>

answered Oct 6, 2015 at 12:53

J Santosh

3,8223 gold badges25 silver badges44 bronze badges

Collectives™ on Stack Overflow

Add span above html input with JavaScript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related