javascript - 使用 JavaScript 在 html 输入上方添加 span

Question

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

我无法在 div 上使用 appendChild，因为 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 元素不能有后代，因为您想在 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>