将元素附加到列表中

Question

我试图动态地将列表元素附加到现有列表.

我在表格中有一个清单,

<ul id="test">
    <li class="testField">YYAAHOOOOOO<li>
</ul>

我试图使用jQuery追加或之后添加一个额外的项目到这个列表...

我做的是:

$(".testField").after("<li class='testField'>TEST MESSENGER</li>"); 

在函数as append不起作用后使用,after函数第一次工作正常,因为只有一个元素具有类名testField,但随着列表的增长,after函数会将列表项添加到所有存在的元素,

为清楚起见,在第一次试用时我会得到一个输出:

<ul id="test">
    <li class="testField">YYAAHOOOOOO<li>
    <li class='testField'>TEST MESSENGER</li>
</ul>

如果我现在尝试添加另一个元素,例如<li class='testField'>GOOGLE</li>输出将是:

<ul id="test">
    <li class="testField">YYAAHOOOOOO<li>
    <li class='testField'>GOOGLE</li>
    <li class='testField'>TEST MESSENGER</li>
    <li class='testField'>GOOGLE</li>
</ul>

我想过使用id,但是我想尝试从列表中删除元素...所以如果我尝试追加到未定义的id,它将返回错误.有没有找到列表中的第一个元素并将元素追加到第一个元素？

Answer 1

尝试:

$(".testField:first").after("<li class='testField'>TEST MESSENGER</li>"); 

这将确保您仅在第一个元素之后追加