1

I'm using web sockets to update a list of comments. I'm nesting ul and li tags to produce the threaded style (explained here).

The problem is that when a new message comes in, I don't want to re-render the entire list of messages. Is there way to manipulate the DOM (preferably with jQuery), to insert the new message into the right "nest" of the list?

Or is there a better way to structure my HTML? (Perhaps a way that uses the parent and child ids as html attributes)

Community
  • 1
  • 1
user94154
  • 16,176
  • 20
  • 77
  • 116

1 Answers1

2

The answer is yes - but you need some way to indicate, for each message that comes in, which comment the new one is replying to. Then, all you need to you is select the old "parent" comment and use jQuery's .append() or .appendChild() function. I recommend using a comment ID system so you can directly select comments by ID.

// new comment comes in, is replying to comment number 12345678.
// Then...
$('#12345678').appendChild(new_comment_html);
Matt Ball
  • 354,903
  • 100
  • 647
  • 710
  • What kind of CSS would I use with this id-naming scheme? – user94154 Feb 28 '11 at 19:46
  • @user: I don't understand your question. What does CSS have to do with this? – Matt Ball Feb 28 '11 at 20:00
  • 1
    To make the divs look indented. – user94154 Mar 01 '11 at 04:03
  • 1
    @user: something like `div.comment { margin-left: 20px; }` would do, I suppose, assuming "nested" comment elements are actually inside of the `div.comment` they are replying to. Did you not see the CSS to go with the markup at the question you linked in your question? – Matt Ball Mar 01 '11 at 04:55