Question

这就是我的html外观：

<div class ="categorie">
    <input class="checkbox_category" type="checkbox" value="174" >sdfasdf</input><br>
    <input class="checkbox_category" type="checkbox" value="175" >bnmbn</input><br>
    <input class="checkbox_category" type="checkbox" value="176" >bnmbn</input><br>
    <div>test</div>
</div>

这是我尝试过的js代码：

$(".categorie input:last").append("<input  class='' alt='' value='"+id+"' type='checkbox'>"+category+"</input>");

我只想在最后一个输入或最后一个类 checkbox_category 之后添加一个HTML代码。我错过了什么？

Answer 1

应该只是

$('.categorie').append(...)

在任何当前内容之后将其追加到最后

＆＃13;

$(function(){
    $('.categorie').append('<input class="checkbox_category" type="checkbox" value="176" >new</input><br>')  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class ="categorie">
    <input class="checkbox_category" type="checkbox" value="174" >sdfasdf</input><br>
    <input class="checkbox_category" type="checkbox" value="175" >bnmbn</input><br>
    <input class="checkbox_category" type="checkbox" value="176" >bnmbn</input><br>
</div>

＆＃13;

编辑：您还可以使用insertBefore：

在其他项目之前插入项目

＆＃13;

$('<input class="checkbox_category" type="checkbox" value="176" >new</input><br>').insertBefore('.categorie>div')

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class ="categorie">
    <input class="checkbox_category" type="checkbox" value="174" >sdfasdf</input><br>
    <input class="checkbox_category" type="checkbox" value="175" >bnmbn</input><br>
    <input class="checkbox_category" type="checkbox" value="176" >bnmbn</input><br>
    <div>test</div>
</div>

＆＃13;

Answer 2

您应该使用.next()定位br元素以及最后一个输入选择器，然后使用 .after() 而不是.append()来追加内容最后输入下一个br元素：

 $(".categorie input:last").next().after("<input  class='' alt='' value='"+id+"' type='checkbox'>"+category+"</input><br/>");

<强> Working Demo

Answer 3

您也可以使用下面的.appendTo()：

$( "<input  class='' alt='' value='"+id+"' type='checkbox'>"+category+"</input>" ).appendTo( ".categorie" );

Answer 4

试试这个。 HTML

<div class ="categorie">
  <input class="checkbox_category" type="checkbox" value="174" />
  <label>Check Box 01</label>
  <br />
  <input class="checkbox_category" type="checkbox" value="175" />
  <label>Check Box 02</label>
  <br />
  <input class="checkbox_category" type="checkbox" value="176" />
  <label>Check Box 03</label>
  <br />
  <div>test div</div>
</div>

<button id="ad" onclick="add()">Add</button>

JS

<script type = "text/javascript">
    function add(){
        var id = "177", category = " Check Box 04",
        input = "<input  class='checkbox_category' value='" + id + "' type='checkbox' />",
        label = "<label>" + category + "</label>",
        br = "<br />",
        html = input + label + br;
        $(".categorie br:last").after(html);
    }
</script>

仅供参考：<input>代码没有结束标记</input>。使用它将在渲染时自行从浏览器中删除。如果你可以查看DOM，你可以看到它。因此，请使用<label>标记来放置文字。

如何在jQuery的最后一个元素后面添加html标签？

4 个答案: