appending multiple groups with values from xml

Question

In my xml file comments are listed as

<Comments> 
<CommentID id="1">
<CommentBy>efet</CommentBy>
<CommentDesc>   Who cares!!! My boyfriend thinks the same with me. tell your friends. 
</CommentDesc>
</CommentID>
<CommentID id="2">
<CommentBy>tetto</CommentBy>
<CommentDesc>   xyz.... </CommentDesc>
</CommentID>
</Comments>

I need to append them inside the ul of the div id="nw-comments".

<div id="nw-comments" class="article-page">
    <h3>Member Comments</h3>
    <ul>
        <li class="top-level">
            <ul class="comment-options right">
                <li>
                <a id="reply_1272195" class="reply" href="javascript:void(0);" name="anchor_1272195">Reply</a>
                </li>
                <li class="last">
                <a id="report_1272195" class="report" href="javascript:void(0);">Report Abuse</a>
                </li>
            </ul>
            <h6>Posted By: [CommentBy] @ [CommentDateEntered]</h6>
            <div class="post-content">
                <p>[CommentDesc]</p>
            </div>
        </li>
    </ul>
</div>  

I tried to do it with the following code but I keep getting errors.

$(document).ready(function(){
    $.ajax({
        dataType: "xml",
        url: "/FLPM/content/news/news.cs.asp?Process=ViewNews&NEWSID=<%=Request.QueryString("NEWSID")%>",
        success: function(xml) {
            $(xml).find('row').each(function(){
                var id = $(this).attr('id');
                var FullName = $(this).find('FullName').text();
                var CommentBy = $(this).find('CommentBy').text();
                var CommentDateEntered = $(this).find('CommentDateEntered').text();
                var CommentDesc = $(this).find('CommentDesc').text();
                $("#nw-comments ul").append("<h6>Posted By: " + CommentBy + " @ " + CommentDateEntered + "</h6><div class=""post-content""><p>" + CommentDesc + "</p></div>");

            });
        }
    });

Answer 1

This part:

$(xml).find('row').each(function(){

Needs to be:

$(xml).find('CommentID').each(function(){

The direct child of your <Comments> element returned is <CommentID>, not <row> like it's currently looking for.

Also, you want to append to only the first <ul> so change this:

$("#nw-comments ul")

To this:

$("#nw-comments > ul > li")

Otherwise it'll append to both <ul>'s and you'll get a duplicate of all comments in the wrong place.