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)
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);