JavaScript，将 html 添加到 jQuery 附加功能

Question

我正在尝试使用 jQuery 在页面上添加按钮。我希望按钮显示为垂直而不是水平。所以我尝试一下

 $(".guess").append("<p>" + guess_answer + "</p>");

但随后它打印到页面:

[对象对象]

[对象对象]

[对象对象]

[对象对象]

而不是按钮。我已经测试了没有段落标签的代码，它可以工作，但当 html 放入其中时却不起作用。

var question1 = {
    question: "What is 4 times 1?",
    answer: "Dream On",
    possible: [1,2,3,4],
    boolean: [true,false,false,false]
};


function generate () {
    $(".question").html(question1.question);

    for (var i = 0; i < question1.possible.length; i++) {       
        var guess_answer = $('<button>');
        guess_answer.addClass("options text-center btn-group-lg");
        guess_answer.attr({
            "data-boolean" : question1.boolean[i]
        });

        guess_answer.text(question1.possible[i]);
        //guess_answer.append(question1.possible[i]);

        $(".guess").append("<p>" + guess_answer + "</p>");
    }
}

Answer 1

使用 guess_answer.prop("outerHTML") 将元素获取为 HTML 字符串

var question1 = {
    question: "What is 4 times 1?",
    answer: "Dream On",
    possible: [1,2,3,4],
    boolean: [true,false,false,false]
};


function generate () {
    $(".question").html(question1.question);

    for (var i = 0; i < question1.possible.length; i++) {       
        var guess_answer = $('<button>');
        guess_answer.addClass("options text-center btn-group-lg");
        guess_answer.attr({
            "data-boolean" : question1.boolean[i]
        });

        guess_answer.text(question1.possible[i]);
        //guess_answer.append(question1.possible[i]);

        $(".guess").append("<p>" + guess_answer.prop("outerHTML") + "</p>");
    }
}