How to append LI to UL as the last element using JQuery

I am creating and populating a list with jQuery and want to add an li element dynamically. I've tried the following but it didnt work for me. Instead the browser crashed. Can anyone help? $(document).ready(function() { $(".tophundredwatchlist").hide(); $(".addtophundredwatchlist").click(function() { $.ajax({ type : "GET", url : "/watchlisttophundred/", success : function(data){ generateList(data); } }); $(this).next().toggle(); return false; }); //this section draws the list function generateList(data) { var raw_tag = "<ul id='listwatchlist' class='listwatchlist'>"; var add_new = "Add New" var json_array = data.json_array; for (var json_count = 0; json_count < json_array.length; json_count++) { var raw_string = "<li id='watchlistitem' class='watchlistitem'>" + json_array[json_count].watch_list_name + "</li>" raw_tag = raw_tag + raw_string } raw_tag = raw_tag + "<div id='addnew' class='addnew'>" + add_new + "</div>" raw_tag = raw_tag + "<div id='newtext' class='newtext'></div>" raw_tag = raw_tag + "</ul>" $(".listwatchlist").html(raw_tag) } //when i try to add the new li like this my browser crashes $('.newwatchlisttext').live("keypress",function(event) { if(event.which == '13'){ var watch_list_name = $(this).val(); /**********************************************************/ $.ajax({ type : "GET", url : "/addwatchlistfromtophundredajaxhandler/", data : "watch_list_name=" + watch_list_name, success : function(msg){ //$("listwatchlist ul").append('<li>' + data.watch_list_name + '</li>'); } }); /**********************************************************/ $(".addnew").show() $(".newtext").hide() } });
Answer:

Your selector is wrong. You should replace this line: $("listwatchlist ul").append('<li>' + data.watch_list_name + '</li>'); with: $("ul#listwatchlist").append('<li>' + data.watch_list_name + '</li>'); Oh and also the nesting the div in the ul as the other answer points out.

Evlikosh Dawark at Stack Overflow Visit the source

Was this solution helpful to you?

Other answers

The main problem you're likely having is the attempted nesting of div's inside of a ul, as JohnP said. But here's an approach to creating dom elements that uses jQuery's built-in functionality that will likely be less error prone. var raw_tag = $("<ul id='listwatchlist' class='listwatchlist' />"); var add_new = "Add New" var json_array = data.json_array; for (var json_count = 0; json_count < json_array.length; json_count++) { raw_tag.append( $("<li id='watchlistitem' class='watchlistitem' />") .text(json_array[json_count].watch_list_name)); } //as noted by JohnP you can't really put div's inside a UL, so you'll need to change that $(".listwatchlist").html(raw_tag) Also, ensure that the id you're giving to your new ul, listwatchlist, is unique in your entire page. You absolutely cannot have multiple elements with the same id.

Adam Rackis

Related Q & A:

How to Search using jQuery ASP.Net?Best solution by Stack Overflow
How to create your own slider using jQuery?Best solution by Stack Overflow
how to set value in ckeditor using jquery?Best solution by Stack Overflow
How to bind an event to appended element in jQuery?Best solution by stackoverflow.com
How to add the last element of the list to the same list at the end?Best solution by Stack Overflow

Just Added Q & A:

How many active mobile subscribers are there in China?Best solution by Quora
How to find the right vacation?Best solution by bookit.com
How To Make Your Own Primer?Best solution by thekrazycouponlady.com
How do you get the domain & range?Best solution by ChaCha
How do you open pop up blockers?Best solution by Yahoo! Answers

For every problem there is a solution! Proved by Solucija.

Got an issue and looking for advice?
Ask Solucija to search every corner of the Web for help.
Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.