Javascript cell.innerHTML() 显示 [object HTMLDivElement]

Question

我有：

var cboxHTMLString = "<input type='checkbox' class='custom-control-input'"
                        + "id='customCheck1' name=${" + check_name + "}>"
                        + "<label class='custom-control-label' for='customCheck1'>"
                        + "</label>";

    var div = document.createElement('div');
    div.setAttribute("class", "custom-control custom-checkbox");
    var checkbox_div = createElementFromHTML(cboxHTMLString, div);

被调用的函数是：

function createElementFromHTML(htmlString, element){
    element.innerHTML = htmlString.trim();
    return element;  //.childNodes;
};

然后我用从 php/mysql 收到的新键值和其他键值填充一个对象：

var d_dict = {Select: checkbox_div};
    //iterate disease_dict and add k,v to d_dict
    for(let key in disease_dict) {
        var new_key = key;
        var new_val = disease_dict[key];
        d_dict[new_key] = new_val;
    }

然后我填充我的表格单元格：

for(let key in d_dict){
            let cell = row.insertCell(-1);
            if(key==='Select'){
                var checkbox_html = d_dict[key];
                cell.innerHTML = checkbox_html;
                console.log(cell);
            }
            else{
                let val = d_dict[key];
                let newText = document.createTextNode(val);
                cell.appendChild(newText);
                console.log(cell);
            }

        }

但它显示文本而不是复选框。

编辑：我做了

for(k in checkbox_html){
   console.log(checkbox_html[k]);
}

它向我展示了一堆整数：

这意味着什么？

Answer 1

您的createElementFromHTML()函数返回一个 DOM 元素对象，而不是一串 HTML：

var checkbox_div = createElementFromHTML(cboxHTMLString, div);

因为它是一个 DOM 元素，你必须使用.appendChild()方法将它附加到单元格：

if(key==='Select'){
    var checkbox_html = d_dict[key];
    cell.appendChild( checkbox_html );
}