Using Jquery To Dynamically Refresh An Ordered List

I have an ordered list that looks as follows:

Species Seen

Solution 1:

$("ol$speciesAdded").appendTo("li").text(item.species);

the selector $ is wrong, I believe...

// is what you wanted?
$("ol#speciesAdded").appendTo("li").text(item.species);

By the way, if you want to get it refreshed, i would suggest to use empty() before.

$("ol#speciesAdded").empty();

One more tipp, if you use appendTo you will let the DOM rerender every time a new item is added. that is not very performant.

try to get all the html, and then insert it at once.

var items = [];

// in the loop then
items.push('<li>' + text + '</li>');

// insert all at once...
$("ol#speciesAdded").empty().html(items.join(""));

Solution 2:

There cannot be a $ selector. Did you by mistake confused with jQuery and you might wanna change your code from:

$.each(data, function (i, item) {
    $("ol$speciesAdded").appendTo("li").text(item.species);
});

by replacing the $ with an # ID selector:

$.each(data, function (i, item) {
    $("ol#speciesAdded").appendTo("li").text(item.species);
});

And also, before refreshing, you need to clear the previous values. So make this way:

$("ol#speciesAdded").html("");
$.each(data, function (i, item) {
    $("ol#speciesAdded").appendTo("li").text(item.species);
});

Share