Appending new comment to the old comments division

Question

I am trying to append new comment to the old comment box . Here is my code , Dont know why its not working

<script type="text/javascript">
    $(document).ready(function () {

        $(function () {
            $(".bsubmit").click(function () {
                var id = $(this).parent().parent().attr("id");
                var comm = document.getElementById(id).getElementsByClassName("commentadd")[0].value;
                $.ajax({
                    type: "POST",
                    url: "comment.php",
                    data: {
                        id: id,
                        comm: comm
                    },
                    cache: false,
                    success: function () {
                        $('.addcomment').slideUp('slow', function () {

                            //  POSTED IN DATABASE SUCCESS NOW APPEND The comment with other COMMENTS 

                            document.getElementById(id).getElementsByClassName(".itemcomment").append('<div class="comm">
    <a href="profile.php?id=<?php echo $_SESSION['
                            fbid ']; ?> class="comm_img"><img src=" <?php echo $_SESSION['
                            smallest ']; ?> width="50" height="50" /></a>
    <p width="50"><strong>
     </strong></p>
     </div>');

                        });
                        $('#load').fadeOut();
                    }
                });
                return false;
            });
        });
    });
</script>

Answer 1

I think the error is in the code inside the "slideUp" callback, so I think the correct way to do it is:

Using regular JavaScript:

$('.addcomment').slideUp('slow', function () {

    var elem = getElementById(id).getElementsByClassName(".itemcomment")[0],
        div = document.createElement("div"),
        a = document.createElement("a"),
        p = document.createElement("p"),
        img = document.createElement("img"),
        strong = document.createElement("strong");

        div.className = "comm";
        a.className = "comm_img";
        a.href = "profile.php?id=<?php echo $_SESSION['fbid ']; ?>";
        img.src = "<?php echo $_SESSION['smallest ']; ?>";
        img.width = "50";
        img.height = "50";
        p.width = "50";

        p.appendChild(strong);
        a.appendChild(img);
        div.appendChild(a);
        div.appendChild(p);
        elem.appendChild(div);
});

Using JQuery:

$('.addcomment').slideUp('slow', function () {
    var html = '<div class=comm>';
    html += '<a href="profile.php?id=' + "<?php echo $_SESSION['fbid'];?>" + 'class=comm_img>';
    html += '<img src="' + "<?php echo $_SESSION['smallest']; ?>" + 'width="50" height="50" /></a>';
    html += '<p width="50"><strong></strong></p></div>';

    $(".itemcomment", "#"+id).append(html);        
});

Hope it helps!