上方添加使用JavaScript
我有一个div
,看起来像这样的html
输入:上方添加使用JavaScript
<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
。
不能使用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>
谢谢 - 这有效。我使用的是querySelectorAll,因为角色在页面上显示多次,并且需要将其添加到每个元素,但是我想我可以在一个函数中将span创建包装起来,然后遍历barcodeField的结果并运行每个输入? –
@ChrisByatt只是使用像https://jsfiddle.net/arunpjohny/fp47f7tg/1/ –
这样的循环@ChrisByatt没有看到你正在使用jQuery ...它更简单 –
使用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>
给它一个ID,以及一类? –