上方添加使用JavaScript

Question

HTML输入范围

我有一个div，看起来像这样的html输入：

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

仅使用JavaScript我需要添加到它上面的DOM这样的：

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

所以最终的结果是：

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

我不能使用appendChild上的div作为input-group类不是唯一的。

这是JavaScript我试过，没有运气：

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

对于初学者它增加了它的输入端（我知道这是由于appendChild但appendParent不存在的，我只是想在下面让它工作）。此外，它似乎忽略了我给每个元素的类，但最大的问题是没有显示在页面上。

该页面也使用Bootstrap和JQuery。

Answer 1

不能使用appendChild()作为输入元素不能有后代，因为你想要的input元素之前插入span，您可以使用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>

---

而不是使用JavaScript创建整个html结构，你可以

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>

Answer 2

使用insertBefore像$('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>