How to add a html element after last child of list item

I am able to add a content after last child of a list item.

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



But how can I add an button or anchor after the last item,for example.

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



3 Answers
3

You need JS to do that, otherwise, you will be having trouble attaching actions to the created button. You can use this snippet as reference.

$("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>

you can't add tags to DOM with CSS, you should use Javascript/Jquery to insert tags to DOM, so you should use jquery append() method.

$('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>

Following code will work

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>

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.