How to add a list item to an existing unordered list

Question

I have code that looks like this    lt div id  header  gt       lt ul class  tabs  gt           lt li gt  lt a href   user view  gt  lt span class  tab  gt Profile lt  span gt  lt  a gt  lt  li gt           lt li gt  lt a href   user edit  gt  lt span class  tab  gt Edit lt  span gt  lt  a gt  lt  li gt       lt  ul gt   lt  div gt    I d like to use jQuery to add the following to the list    lt li gt  lt a href   user messages  gt  lt span class  tab  gt Message Center lt  span gt  lt  a gt  lt  li gt    I tried this       content ul li last   append   lt li gt  lt a href   user messages  gt  lt span class  tab  gt Message Center lt  span gt  lt  a gt  lt  li gt       But that adds the new li inside the last li  just before the closing tag   not after it   What s the best way to add this li

User · Answer

jQuery comes with the following options which could fulfil your need in this case:

append is used to add an element at the end of the parent div specified in the selector:

$('ul.tabs').append('<li>An element</li>');

prepend is used to add an element at the top/start of the parent div specified in the selector:

$('ul.tabs').prepend('<li>An element</li>');

insertAfter lets you insert an element of your selection next after an element you specify. Your created element will then be put in the DOM after the specified selector closing tag:

$('<li>An element</li>').insertAfter('ul.tabs>li:last');
will result in:
<li><a href="/user/edit"><span class="tab">Edit</span></a></li>
<li>An element</li>

insertBefore will do the opposite of the above:

$('<li>An element</li>').insertBefore('ul.tabs>li:last');
will result in:
<li>An element</li>
<li><a href="/user/edit"><span class="tab">Edit</span></a></li>

User · Answer

This is another one      header ul li   last   html   lt li gt  Menu 5  lt  li gt

User · Answer

Just to add to this thread - if you are moving an existing item you will need to use clone and then true false on whether you clone deep-clone the events as well  https   api jquery com clone     Example      content ul   append     existing li   clone true

User · Answer

If you are simply adding text in that li  you can use        ul   append     lt li gt    text  Some Text

User · Answer

You can do it also in more  object way  and still easy-to-read       content ul   append          lt li gt    append              lt a gt    attr  href    user messages   append                  lt span gt    attr  class    tab   append  Message center              You don t have to fight with quotes then  but must keep trace of braces

User · Answer

This would do it       header ul   append   lt li gt  lt a href   user messages  gt  lt span class  tab  gt Message Center lt  span gt  lt  a gt  lt  li gt       Two things    You can just append the  lt li gt  to the  lt ul gt  itself  You need to use the opposite type of quotes than what you re using in your HTML  So since you re using double quotes in your attributes  surround the code with single quotes

User · Answer

content ul   append   lt li gt  lt a href   user messages  gt  lt span class  tab  gt Message Center lt  span gt  lt  a gt  lt  li gt       Here is some feedback regarding Code Readability  shameless plug for a blog   http   coderob wordpress com 2012 02 02 code-readability  Consider separating the declaration of your new elements from the action of adding them to your UL   It would look something like this   var tabSpan       lt span  gt          html   Message Center      var messageCenterAnchor       lt a  gt          href   user messages       html  tabSpan     var newListItem       lt li  gt          html  messageCenterAnchor       id    myIDGoesHere            NOTE  you have to put quotes around  id  for IE       content ul   append newListItem     Happy coding

User · Answer

This is the shortest way you can do that   list push     lt li gt     text  blocks i          ul   append list     Where blocks in an array  and you need to loop through the array

User · Answer

Instead of      header ul li last     try      header ul

User · Answer

You should append to the container  not the last element       content ul   append   lt li gt  lt a href   user messages  gt  lt span class  tab  gt Message Center lt  span gt  lt  a gt  lt  li gt       The append   function  should ve probably been called add   in jQuery because it sometimes confuses people  You would think it appends something after the given element  while it actually adds it to the element

User · Answer

How about using  after  instead of  append        content ul li last   after   lt li gt  lt a href   user messages  gt  lt span class  tab  gt Message Center lt  span gt  lt  a gt  lt  li gt         after    can insert content  specified by the parameter  after each element in the set of matched elements

User · Answer

easy     Creating and adding an element to the page at the same time      ul    append    lt li gt list item lt  li gt

User · Answer

content ul   append   lt li gt  lt a href   user messages  gt  lt span class  tab  gt Message Center lt  span gt  lt  a gt  lt  li gt

[jquery] How to add a list item to an existing unordered list?

Examples related to jquery

Examples related to jquery-append