[英]How to add a html element after last child of list item
我可以在列表項的最后一個子項之后添加內容。
li:last-child:after {
content: "Content";
}
但是,例如,如何在最后一項之后添加按鈕或錨點。
li:last-child:after {
content: "<button id="listButtonAdd"></button>";
}
您需要使用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>
您不能使用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>
以下代碼將起作用
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.