如何将列表项附加到此 ol？ [复制]

Posted 2023-05-07

【中文标题】如何将列表项附加到此 ol？ [复制]

【英文标题】：How do I append a list item to this ol? [duplicate]

【发布时间】：2019-01-02 17:20:14

【问题描述】：

<div id="everything">
  <ol>
    <li>Here is thing one.</li>
    <li>Here is thing two.</li>
    <li>Here is thing three.</li>
  </ol>

我想在 ol 列表中添加一个额外的 li，我该如何使用 append()？

编辑：我发现我的问题是我没有用标签包装我的 append()。

我想附加一个新的列表项，上面写着“这是第四件事”。我将如何使用 append() 来做到这一点？

【问题讨论】：

请向我们展示您的尝试

你知道append方法，那么你的问题是关于如何选择ol元素？

谢谢..我认为我的问题是我没有将它包装在 的 append 方法中:(

【参考方案1】：

下面的代码创建一个 item 元素 (li) 并将其附加到选择器为“everything”的元素。

$('<li>Your text</li>').appendTo('#everything');

使用这种方法的好处是可以将 item 元素附加到无序列的 html 列表 (ul) 或有序的 HTML 列表 (ol)。

这里是appendTo 方法的文档链接。

说明：将匹配元素集中的每个元素插入到目标的末尾。

注意：

请注意，我使用了您提供的选择器#everything，而不是使用字符串ol。原因是，如果我这样做，它将将该项目附加到您页面中的任何有序列表中。

【讨论】：

@brasofilo 完成

【参考方案2】：

.append() 函数的基本形式将为您提供帮助（就像快速的 Google 搜索一样）。

$( "ol" ).append( "<li>Here is thing four.</li>" );

【讨论】：

我只会修改此代码以使用提供的选择器#everything，否则页面中的任何有序列表都会附加此元素。换句话说，如果用户在页面上有多个有序列表，则相同的项目将显示在这些列表中。