代码之家 › 专栏 › 技术社区 › 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>

推荐文章

xajetin · 导航不更改滚动上的颜色

3 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

3 年前

Bryan Santos · 固定表头与引导

3 年前

Nicolas Berthier · Bootstrap 5基于内容的包装

3 年前

tym · 根据用户偏好显示字段

3 年前

Sheryar Khan · 如何仅使用html、css、bootstrap、javascript/jquery创建html页面?

3 年前

Pavel · 当验证DIV可见时,引导网格会移动

7 年前

Sam · 在标题中嵌入Bootstrap 3导航栏

7 年前

Alexander David · 折叠卡打开,然后立即再次关闭

7 年前

Sandeep Bhardwaj · div的一致行为,与设备分辨率无关

7 年前