Question

我在html中有一个div输入，如下所示：

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

＆＃13;

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

＆＃13;

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

＆＃13;

使用JavaScript在html输入上添加span

2 个答案: