【问题标题】:How do I append a list item to this ol? [duplicate]如何将列表项附加到此 ol? [复制]
【发布时间】: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 方法中:(

标签: jquery html


【解决方案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,否则页面中的任何有序列表都会附加此元素。换句话说,如果用户在页面上有多个有序列表,则相同的项目将显示在这些列表中。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2011-12-09
  • 1970-01-01
  • 2019-01-17
  • 2016-02-02
  • 2013-09-25
  • 2020-08-10
相关资源
最近更新 更多