代码之家 › 专栏 › 技术社区 › Simsons

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

twitter-bootstrap css html jquery javascript

Simsons · 技术社区 · 6 年前

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

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

但如何在最后一项之后添加按钮或锚定,例如。

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

3 回复 | 直到 6 年前

Ranielle Canlas 6 年前

您需要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>

Dvlpr 6 年前

不能用CSS向DOM添加标记,应该使用Javascript/Jquery向DOM插入标记,因此应该使用Jquery append()方法。

$('ul li:last').append('<button id="listButtonAdd">This is a button</button>');

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

yogesh vaidya 6 年前

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>

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前