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

我在一个

div

中得到了一个

html

输入，如下所示：

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

首先，它将其添加到输入下面（我知道这是由于

appendChild

造成的，但是

appendParent

不存在，我只是想让它工作）。而且它似乎忽略了我给每个元素的类，但最大的问题是页面上没有显示任何内容

该页面还使用了

Bootstrap

和

JQuery

不能用作输入元素不能有子元素，因为要在

input

元素之前插入

span

，可以使用

var barcodeField=document.querySelector（“[role=barcode]”）；
var span=document.createElement（'span'）；
span.className='输入组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条码’；
scanButton.appendChild（i）；
scanButton.appendChild（链接文本）；
span.appendChild（扫描按钮）；
barcodeField.parentNode.insertBefore（span，barcodeField）

不能用作输入元素不能有子元素，因为要在
input
元素之前插入
span
，可以使用


var barcodeField=document.querySelector（“[role=barcode]”）；
var span=document.createElement（'span'）；
span.className='输入组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条码’；
scanButton.appendChild（i）；
scanButton.appendChild（链接文本）；
span.appendChild（扫描按钮）；
barcodeField.parentNode.insertBefore（span，barcodeField）
使用
insertBefore
类似
$（'html to insert'）。insertBefore（'html必须插入的元素'）


$（''）.insertBefore（'#txtbox'）
使用
insertBefore
类似
$（'html to insert'）。insertBefore（'html必须插入的元素'）


$（''）.insertBefore（'#txtbox'）

给它一个ID和一个类？给它一个ID和一个类？谢谢-这很有效。我正在使用querySelectorAll，因为角色在页面上多次出现，需要将其添加到每个元素中，但我想我可以将跨度创建总结到一个函数中，然后循环barcodeField的结果，并为每个输入运行该函数？@ChrisByatt没有看到您正在使用jQuery。。。这样做简单多了，谢谢——这很有效。我正在使用querySelectorAll，因为角色在页面上多次出现，需要将其添加到每个元素中，但我想我可以将跨度创建总结到一个函数中，然后循环barcodeField的结果，并为每个输入运行该函数？@ChrisByatt没有看到您正在使用jQuery。。。这样就简单多了
<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>

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