Question

I’m trying to loop all matched results so they appear in a list form. I have tried using $(‘div#comments’).html(commentdata); – but it only shows me the first match of data / the first comment.

I then tried using .append instead of .html, this shows all the comments ok – but adds all the data on again everytime I run the onClick event that is attached to the request.

In short; how can I list all of my comments, without them being added/appended every time I click on the object that loads them.

---

var xml = data.responseXML;

var comments = xml.documentElement.getElementsByTagName("comment");

for (var i = 0; i < comments.length; i++) {

      var user = comments[i].getAttribute("username");
      var comm = comments[i].getAttribute("comment");
      var commentdata = "<li>"+ user +" - " + comm +"</li>";

      $('div#comments').append(commentdata);

}

Answer 1

var xml = data.responseXML;

var comments = xml.documentElement.getElementsByTagName("comment");

// html collection
var commentdata = [];

// open <ul>
commentdata.push('<ul>');

// cache this
var len = comments.length;
for (var i = 0; i < len; i++) {

      var user = comments[i].getAttribute("username");
      var comm = comments[i].getAttribute("comment");

      // add <li> element
      commentdata.push("<li>"+ user +" - " + comm +"</li>");

}

// end <ul>
commentdata.push('</ul>');

// update <div id="comments"> contents
$('div#comments').html(commentdata.join("\n"));

Praveen is also correct, you could just empty the container before you start appending data:

$('div#comments').empty();