jQuery command other than appendTo

Question

I am trying to clear an LI tag's previous data.

Is there another command that will work other than appendTo?

Here is what my code currently looks like:

 var obj = JSON.parse(data);
 $.each(obj, function(index, item)
 {
   $('<li>').
     text(item.datestamp+' - '+item.comment).
     appendTo($('#pCodeComment'));
 });

I asked a similar question not too long ago. I just want to know if there is another command other than appendTo that will clear out the previous data.

In this case you're likely better off using .empty to empty the target. However, that makes no sense, because you're doing this in a loop... I guess, unless you empty it before the loop. — Kevin B, Jan 12 '15 at 20:03
@KevinB - good eyes, the loop sorta messes it up if you remove the content on each iteration. — adeneo, Jan 12 '15 at 20:05
In other words, just do `$('#pCodeComment').empty()` before `$.each` — adeneo, Jan 12 '15 at 20:06

score 3 · Accepted Answer · edited May 23 '17 at 12:20

3

You should empty the list before you loop to populate it, then just continue doing what you are already doing.

var obj = JSON.parse(data);
$('#pCodeComment').empty();
$.each(obj, function(index, item)
{
  $('<li>').
    text(item.datestamp+' - '+item.comment).
    appendTo($('#pCodeComment'));
});

And after optimizing a little bit:

var obj = JSON.parse(data); // i'm assuming `obj` is an array
var htmlToInsert = obj.map(function (item) {
        return '<li>' + item.datestamp + ' - ' + item.comment + '</li>';
    }).join('');
$('#pCodeComment').html(htmlToInsert);

_{Note: the above is vulnerable to XSS. See this so question for ways to fix it, or just use the original.}

edited May 23 '17 at 12:20

Community

1
1

answered Jan 12 '15 at 20:06

Kevin B

94,570
16
163
180

You might want to consider not making that selection N+1 times. – Benjamin Gruenbaum Jan 12 '15 at 20:07
Definitely a good idea, just didn't want to change code that wasn't relevant to the answer. I would take it a step further and generate a plain text html string and insert/empty all in one step with .html. – Kevin B Jan 12 '15 at 20:07
1

This new version has an XSS vulnerability the older one did not have. If item.comment contains for instance. – Benjamin Gruenbaum Jan 12 '15 at 20:14
@Kevin B - Any chance you can help me fix the code to check to see if the JSON data is blank, and if so, keep the LI tag clear of anything? – John Beasley Jan 12 '15 at 20:14
@HoodCoderMan please do not ask several questions in one thread it is considered rude in Stack Overflow to do that. You can open a new question if you'd like. – Benjamin Gruenbaum Jan 12 '15 at 20:15
@Benjamin Gruenbaum - I will take that into consideration. Only reason I asked is because I cannot post another question for 90 minutes now. That is all. – John Beasley Jan 12 '15 at 20:15
Could fix the xss issue using a method similar to one of the methods here: http://stackoverflow.com/questions/5499078/fastest-method-to-escape-html-tags-as-html-entities – Kevin B Jan 12 '15 at 20:18

score 0 · Answer 2 · answered Jan 12 '15 at 20:05

0

$.replaceWith()

might be what you are looking for, or as Kevin B pointed out

$.html()

replaceWith would need an element selected to replace. whilst html will populate a parent element to insert a new dom fragment into.

answered Jan 12 '15 at 20:05

Jack Wall

121
1
4

jQuery command other than appendTo

2 Answers2