javascript - 使用 jQuery 将 <li class> 附加到 <ul class>

Question

当我在浏览器中运行该函数时，显示“[object Object]”而不是变量 $new_comment 中存储的文本。我想附加用户输入。

HTML :

<li class="list-group-item">"User comments"</li>

<div class="comments">
    <ul class="list-group"></ul>
</div>

Js:

var addCommentFromInputBox = function() {
    var $new_comment;

    if ($(".input-group input").val() !== "") {
        $new_comment = $("<p>").text($(".input-group input").val());
        $new_comment.hide();

        $(".list-group").append('<li class="list-group-item">' + ($new_comment) + '</li>');
        $new_comment.fadeIn();
        $(".input-group input").val("");
    }
};

将代码更改为:

$(".list-group").append($new_comment);

但我想用 Bootstrap 来设计它。

Answer 1

你可以像这样使用它 $(".list-group").append($('<li class="list-group-item"></li>').html($new_comment));

这是完整的演示代码

addCommentFromInputBox = function() {
        var $new_comment;

        if ($(".input-group input").val() !== "") {
            $new_comment = $("<p>").text($(".input-group input").val());
            $new_comment.hide();

            $(".list-group").append($('<li class="list-group-item"></li>').html($new_comment));
            $new_comment.fadeIn();
            $(".input-group input").val("");
        }
  }

addCommentFromInputBox();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="comments">
            <ul class="list-group">
            </ul>
        </div>