How to prepend HTML `<li>` to `<ul>` using jQuery?

user_5203065 0
Viewed 2947

I need to append an <li> element to multiple <ul> using a for-loop in jQuery.

Code Snippet:

JQuery:

var lists = $('ul.menu');

for(var i=0; i<lists.length; i++){
    var lnk = "<li>All</li>";
    lnk = $('<div />').html(lnk).text();
    lists[i].prepend(lnk);
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
    <li>Graphics</li>
    <li>Videos</li>
    <li>Programming</li>
</ul>
<hr>
<ul class="menu">
    <li>Our Story</li>
    <li>About Us</li>
</ul>

As per code <li> inserts as the proper text, but is been formatted as plain text instead of an <li>.

What am I doing wrong? How to correct my mistakes?

css html jquery javascript
2 Answers

You're calling the raw DOM prepend (which only exists on modern browsers), because lists[i] accesses the raw ul element. You're also just taking the text of what you want to prepend, rather than including any li markup. You probably want to:

  1. Call jQuery's prepend, and

  2. Include the li in what you're prepending

Example:

var lists = $('ul.menu');

for(var i=0; i<lists.length; i++){
 var lnk = "<li>All</li>";
 lists.eq(i).prepend(lnk);
}
/* No CSS */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
 <li>Graphics</li>
 <li>Videos</li>
 <li>Programming</li>
</ul>
<hr>
<ul class="menu">
 <li>Our Story</li>
 <li>About Us</li>
</ul>

user_1572470

A slightly more jQuery-ish alternative to TJ Crowder's solution...

$('ul.menu').each(function() {
    $(this).prepend("<li>All</li>");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
    <li>Graphics</li>
    <li>Videos</li>
    <li>Programming</li>
</ul>
<hr>
<ul class="menu">
    <li>Our Story</li>
    <li>About Us</li>
</ul>

user_7467360
Related