Question

i want to create comment system, where entered comments will be added to particular div. below is my code.

<ul class="comments">

    <li>
        <a class="commenter_name" href="/">Dushyanth Lion</a>
            comment by user
    </li>
     <li>
         <a class="commenter_name" href="/">Saikat Bhattacharjee</a>
         comment by user
     </li>
</ul>
  <div class="comment_entry">
        <form method="post" action="#">
            <input type="text" placeholder="Leave comment" />
            <input type="submit" style="display:none;" onclick="" />
        </form>
  </div>

You can figure out what i am doing here. please tell me how can i dynamically add ‘li’ after comment is submitted?

Answer 1

Try this (see demo: http://jsfiddle.net/7rkX4/):

var user_name = 'Danil';

$('.comment_entry form').submit(function (e) {
  e.preventDefault();
  var comment = $('input', this).val();
  $('.comments').append('<li><a class="commenter_name" href="/">' + user_name + '</a>' + comment + '</li>');
});