javascript - 如何在列表项的最后一个子项之后添加 html 元素

Question

我可以在列表项的最后一个子项之后添加内容。

li:last-child:after {
    content: "Content";
}

但是，例如，我如何在最后一项之后添加按钮或 anchor 。

li:last-child:after {
    content: "<button id="listButtonAdd"></button>";
}

Answer 1

您需要 JS 来执行此操作，否则，您将无法将操作附加到创建的按钮。您可以使用此代码段作为引用。

$("li:last-child").append(" <button id='listButtonAdd'>Some Button</button>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3 </li>
</ul>