如何使用jQuery在最后一个元素后添加HTML标签？

Question

这是我的HTML样式：

这是我的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>");

我只想在最后一个input或最后一个类checkbox_category之后添加一个html代码。我错过了什么吗？

- Jozsef Naghi

Answer 1

应该只是这样的：

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

这将在当前内容之后追加它。

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

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

编辑：您还可以使用insertBefore在另一个项目之前插入项目：

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

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

- Jamiec

---

如果在输入元素之后有非输入元素，那么这是行不通的。 - Milind Anantwar

@MilindAnantwar - 这只是将任何内容附加到末尾 - 已经有非输入元素（<br/>），它可以正常工作。 - Jamiec

我刚刚更新了我的帖子，我忘记提到在最后一个输入框之后还有一个元素。 - Jozsef Naghi

@JozsefNaghi - 你想要新输入在<div>之前还是之后？ - Jamiec

我希望它在那个div之前。 - Jozsef Naghi

Answer 2

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

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

演示链接

- Milind Anantwar

Answer 3

您也可以像下面这样使用 .appendTo()：

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

- Alireza MH

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>

FYI：<input>标签没有闭合标签</input>。当它被渲染时，浏览器会自动删除该标签。如果您可以检查DOM，您就可以看到它。因此，请使用<label>标签来放置您的文本。

- PHCJS