Question

Html：

<div class="form-group img-upload">
     <label class="control-label col-md-offset-3 col-md-2 btn green" style="text-align:center;">Add Image<span class="required" aria-required="true"></span>
     </label>
     <div class="col-md-7" id="prev_image"></div>
</div>

我想追加：

 <input type="file" name="data[Tolet][images][]" class="form-control hide img-btn" id="1">

完全在之后 #img-upload>label>span

追加后我的预期html：

<div class="form-group img-upload">
    <label class="control-label col-md-offset-3 col-md-2 btn green" style="text-align:center;">Add Image<span class="required" aria-required="true"></span>
        <input type="file" name="data[Tolet][images][]" class="form-control hide img-btn" id="1">                                
    </label>
    <div class="col-md-7" id="prev_image"></div>
</div>

jquery的

var fileInput = '<input type="file" name="data[Tolet][images][]" class="form-control hide img-btn" id="'+ id +'">';
('.img-upload>label>span').append(fileInput);

但它不起作用没有显示任何错误。

Answer 1

您正在寻找.after()

在参数中的每个元素之后插入由参数指定的内容一组匹配的元素。

$('.img-upload>label>span').after(fileInput);

DEMO

您也可以使用.insertAfter()

$(fileInput).insertAfter('.img-upload>label>span');

DEMO

.after()和.insertAfter()方法执行相同的任务。该主要区别在于语法特定，在放置中内容和目标。使用.after()，选择器表达式在该方法之前是容器，在该容器之后是内容插入。另一方面，使用.insertAfter()，内容先于该方法，作为选择器表达式或作为标记创建苍蝇，它被插入目标容器之后。

Answer 2

追加意味着在内容之后提到的元素。

即您只需使用$('.img-upload>label').append(fileInput)作为选择器。这意味着fileInput将附加到标签的末尾。

var id = 1;
var fileInput = '<input type="file" name="data[Tolet][images][]" class="form-control hide img-btn" id="'+ id +'">';
$('.img-upload>label').append(fileInput);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="form-group img-upload">
     <label class="control-label col-md-offset-3 col-md-2 btn green" style="text-align:center;">Add Image<span class="required" aria-required="true"></span>
     </label>
     <div class="col-md-7" id="prev_image"></div>
</div>

在一些标签之后追加

2 个答案: