如何使用jquery动态添加特定div中的元素。我想添加评论

时间:2012-08-21 09:01:05

标签: javascript jquery html css

我想创建评论系统,其中输入的评论将添加到特定的div。下面是我的代码。

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

你可以弄明白我在这里做什么。请告诉我如何在提交评论后动态添加“li”?

3 个答案:

答案 0 :(得分:2)

试试这个(参见演示: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>');
});

答案 1 :(得分:0)

$('.comments').append('<li><a href="#">Foobar</a> Comment</li>');

答案 2 :(得分:0)

提交正常按钮并为其提供ID以及文本字段:

<input type="text" placeholder="Leave comment" id="comment" />
<button type="button" style="display:none;" id="submitComment" />

添加jquery:

$('#submitComment').live(click,function(){
    $('.comments').append('<a class=\"commenter_name\" href=\"/\">Dushyanth Lion</a>'+ $('#comment').val());
});