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

Question

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

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

例如，如何在最后一项之后添加按钮或锚点。

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>

Answer 2

您无法使用CSS将标签添加到DOM，您应该使用Javascript / Jquery在DOM中插入标签，因此应使用jquery append（）方法。

Z-fighting

SCNVector3 (0,0,0.001)

Answer 3

以下代码将起作用

var item = document.createElement("li");
item.innerHTML = "d";
document.getElementsByClassName("list")[0].append(item)

<ul class= " list">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>