javascript - 将元素附加到列表

Question

我正在尝试将列表元素动态附加到现有列表。

我在表单中有一个列表，

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

我正在尝试使用 jQuery append 或在...之后向此列表添加一个额外的项目

我所做的是:

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

作为追加函数后使用不起作用，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>"); 

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