2

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

我在表格中有一个列表，

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

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

我所做的是： 

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

使用 after 函数作为 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，它将返回错误。无论如何要找到列表中的第一个元素并将元素附加到第一个元素？

4

2 回答 2

5

尝试：

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

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

于 2012-12-14T07:24:30.003 回答
0

或者，您可以在没有 jQuery 的情况下执行此操作：

var li = document.createElement('li');                       // Create a List item.
    li.setAttribute("class", "testfield");                   // Set the li's class
    li.addChild(document.createTextNode("Your Text Here!")); // Set the li's text
document.getElementById("test").addChild(li);                // Append the li to the list

是的，它的代码略多一些，但这几乎是 jQuery 在幕后所做的。（也更快）

如果要li在列表中的第一个之后添加新的 ul，请将最后一行替换为：

var ul = document.getElementById("test");
if(ul.children.length > 1){              // If the list has 2 or more children (li's)
    ul.insertBefore(li, ul.children[1]); // Insert the new item before the second item in the list.
}else{
    document.getElementById("test").addChild(li); 
}

现在，为什么我要发布需要更多代码的答案？
可以在 jQuery 中完成的任何事情都可以在原生 JS 中完成。我认为在 SO 上有多个不同的答案很好，特别是如果他们使用不同的技术来做同样的事情。这样，用户可以自己选择：short'n easy (jQuery)，或者如果他们不想使用该库，则选择本机代码。

于 2012-12-14T07:47:06.717 回答