上方添加使用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>