seventheyejosh Posted November 11, 2009 Share Posted November 11, 2009 Say I have this UL: <ul id="mylist"> <li id="1">1</li> <li id="2">2</li> </ul> I want to have a button: <button id="another_entry">Add Another</button> that when clicked will add a new element to the end of the <ul>, but not outside of it, inside it. append() does something like this: <ul id="mylist"> <li id="1">1</li> <li id="2">2</li> </ul> <li id="3">3</li> whereas I need it to do this: <ul id="mylist"> <li id="1">1</li> <li id="2">2</li> <li id="3">3</li> </ul> I'd prefer if it was able to autoincrement the id number, but i'd be happy enough if someone can give me a point towards how to do the append. Thank you very much, Josh. Quote Link to comment https://forums.phpfreaks.com/topic/181139-jquery-append-to-inside-end-of/ Share on other sites More sharing options...
isedeasy Posted November 11, 2009 Share Posted November 11, 2009 append() will do <ul id="mylist"> <li id="1">1</li> <li id="2">2</li> <li id="3">3</li> </ul> after() will do <ul id="mylist"> <li id="1">1</li> <li id="2">2</li> </ul> <li id="3">3</li> I quickly wrote the following, Is this the kind of thing you are after? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#another_entry').click(function() { var cur_no = parseInt($('#mylist li:last').attr('id')) + 1; $('#mylist').append('<li id="'+ cur_no +'">'+ cur_no +'</li>'); }) }); </script> </head> <body> <ul id="mylist"> <li id="1">1</li> <li id="2">2</li> </ul> <a href="#" id="another_entry">Add Another</a> </body> </html> Online Demo Quote Link to comment https://forums.phpfreaks.com/topic/181139-jquery-append-to-inside-end-of/#findComment-955692 Share on other sites More sharing options...
seventheyejosh Posted November 11, 2009 Author Share Posted November 11, 2009 Yes that is perfect! Thank you so much I was just in the process of accepting defeat and using innerHTML instead. Also, +1 for hosting a demo Amazing. Quote Link to comment https://forums.phpfreaks.com/topic/181139-jquery-append-to-inside-end-of/#findComment-955762 Share on other sites More sharing options...
haku Posted November 12, 2009 Share Posted November 12, 2009 Just a quick headsup, it's not good to start IDs with digits. It's invalid, and it can cause problems in other spots further down the line. Quote Link to comment https://forums.phpfreaks.com/topic/181139-jquery-append-to-inside-end-of/#findComment-955932 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.