CODEWITHSUNDEEP
javascriptjquery
Kurkula
Kurkula

Reputation: 6762

jquery unable to add li to ul

I am trying to add a li inside a ul using jquery. Unable to get the li added with below line. what would be the issue?

My fiddle is here

<ul class='custom-menu'>
  <li data-action="first">First thing</li>
  <li data-action="second">Second thing</li>
  <li data-action="third">Third thing</li>
</ul>

 $(".custom-menu ul:last").append('<li> hey test ...</li>');
 //$(".custom-menu ul").append('<li> hey test ...</li>');
 console.log($('.custom-menu').html());

Upvotes: 0

Views: 106

Answers (5)

raychz
raychz

Reputation: 1175

The cleanest solution is $(".custom-menu").append('<li> hey test ...</li>');, as explained by LXhelili and j08691. Since append inserts the specified content as the last child of each element in the jQuery collection, you don't need to specify :last.

Edited to address comment below.

Upvotes: 2

j08691
j08691

Reputation: 207891

You want to use .after() with li:last, not .append() or ul:last

$(".custom-menu li:last").after('<li> hey test ...</li>');


 $(".custom-menu li:last").after('<li> hey test ...</li>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='custom-menu'>
  <li data-action="first">First thing</li>
  <li data-action="second">Second thing</li>
  <li data-action="third">Third thing</li>
</ul>

Or you could use .append() with the <ul> by itself (no :last needed) with:

$(".custom-menu").append('<li> hey test ...</li>');

as .append() inserts the content as the last child by default.

 $(".custom-menu").append('<li> hey test ...</li>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='custom-menu'>
  <li data-action="first">First thing</li>
  <li data-action="second">Second thing</li>
  <li data-action="third">Third thing</li>
</ul>

.after(): Inserts content after each element in the set of matched elements.

.append(): Inserts content to the end of each element in the set of matched elements. The .append() method inserts the specified content as the last child of each element in the jQuery collection

Notice the difference between the two. .after() inserts content after the element(s) you specify while .append() inserts the content as the last child of the element(s) you specify.

Upvotes: 1

Anthony
Anthony

Reputation: 1581

You need to change your selector from .custom-menu ul:last to ul.custom-menu:last.

.custom-menu ul:last is targeting the last ul element within .custom-menu.

ul.custom-menu:last is targeting the last ul element with the class .custom-menu.

Here's an updated fiddle.

Upvotes: 1

spawnedc
spawnedc

Reputation: 476

$(".custom-menu ul:last").append targets the last ul inside the .custom-menu, which IS the ul itself. What you want to do is append an li inside the .custom-menu. So your code should be:

 $(".custom-menu").append('<li> hey test ...</li>');

Or, alternatively:

$(".custom-menu li:last").after('<li> hey test ...</li>');

See the fiddle.

Upvotes: 1

LXhelili
LXhelili

Reputation: 980

This way.

 $(".custom-menu").append('<li> hey test ...</li>');
 //$(".custom-menu ul").append('<li> hey test ...</li>');
 console.log($('.custom-menu').html());

https://jsfiddle.net/cbfys0o0/

Upvotes: 1

Related Questions