如何通过JavaScript将复选框添加到段落中？

Question

我正在尝试将复选框添加到div内的段落中。 cshtml：

<div id="checkbox">
    <p>

    </p>
</div>

JavaScript代码：

 function getData() {
        //alert('button clicked');
        var dateFrom = $('#datetimepickerFrom').val();
        var dateTo = $('#datetimepickerTo').val();

    var id = $('#ddlSite').val();
    Module.loader('show');
    $("#graphId").empty();
    //zatim za graf
    $.ajax({
        type: "POST",
        url: ROOT + "Test/GetGraph",
        data: { validFrom: dateFrom, validTo: dateTo, deviceId: id },
        cache: false,
        headers: {
            Accept: "application/json"
        },
        success: function (data) {
            var brUredjaja = data.length;
            $('#checkbox').empty();
            for (i = 0; i < brUredjaja; i++) {
                {
                    var brParametara = data[i].series.length;

                    if ((brParametara > 1) || (brUredjaja > 1)) {

                        for (j = 0; j < brParametara; j++) {
                            {
                                $("#graphId").append("<div class='graphReport col-md-6' id = div" + i + "dev" + j + " graph-name='" + data[i].series[j].name + data[i].deviceName + "'></div>");
                                $('#checkbox').append('<input type="checkbox" checked class="graphCb" graph-name="' + data[i].series[j].name + data[i].deviceName + '" />' + '(' + data[i].deviceName + ')' + data[i].series[j].name.split('[')[0]);
                                InitGraph(data[i].dates, data[i].series[j].data, "div" + i + "dev" + j, data[i].series[j].name, data[i].deviceName);
                            }
                        }
                    } else {
                        for (j = 0; j < brParametara; j++) {
                            {
                                $("#graphId").append("<div class='graphReport col-md-6' id = div" + i + "dev" + j + " graph-name='" + data[i].series[j].name + data[i].deviceName + "'></div>");
                                $('#checkbox').append('<input type="checkbox" checked class="graphCb" graph-name="' + data[i].series[j].name + '" />' + data[i].series[j].name.split('[')[0]);
                                InitGraph(data[i].dates, data[i].series[j].data, "div" + i + "dev" + j, data[i].series[j].name, data[i].deviceName);
                            }
                        }
                    }
                }
            }
            initGraphCheckBoxes();
            Module.loader('hide');
        },
        error: function (xhr, ajaxOptions, thrownError) {
            Module.loader('hide');
            if (xhr.status === 403) {
                window.location = ROOT + 'Dashboard/Main/';
            }
        }
    })
}

function initGraphCheckBoxes() {
    var para = document.createElement("P");                     
    var t = document.createTextNode("This is a paragraph.");
    var cBoxes = document.getElementsByClassName("graphCb");
    para.appendChild(cBoxes);
    document.getElementById("checkbox").appendChild(para);
}

当我想在段落内添加一些文本时，它工作正常，但是如何在该段落内添加复选框而不是文本？

我已经准备好在div内附加复选框的功能，它看起来像这样：

function initGraphCheckBoxes() {
    $('.graphCb').on('change', function () {
        var graphName = $(this).attr('graph-name');
        $('div[graph-name="' + graphName + '"]').toggle("slow");
    })
}