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>

Answer 2

var listGroupItem = $('<li class="list-group-item"></li>').html($new_comment)
$(".list-group").append($listGroupItem);

使用jQuery将<li class =“”>附加到<ul class =“”>

2 个答案: