js创建input标签的问题

Question

问题描述

我在js动态添加一个checkbox时候，出现了值在浏览器中不能查看到的问题

问题出现的环境背景及自己尝试过哪些方法

我舍弃了一部分代码，但是ajax的方法我确实通过了并返回了列表数据

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
function getCheckBox(name) {

var inp = document.createElement('input');
inp.setAttribute("type", "checkbox");
inp.setAttribute("name", name);
return inp;

}

// 获取到标签加入到选择项里面
var ul = document.getElementById('likes');
ajax("/api/getlikes/", function (data) {

var tmp = JSON.parse(data);
for (var i = 0; i < tmp.length; i++){
    var li = document.createElement('li');
    var che = getCheckBox("userlikes");
    che.setAttribute("value", tmp[i]);
    // che.appendChild(document.createTextNode(tmp[i]));
    che.innerHTML = tmp[i];
    li.appendChild(che);
    ul.appendChild(li);
}

})‘

你期待的结果是什么？实际看到的错误信息又是什么？

它应该正常显示文本而不是空白
我发现input后跟了一个闭合标签</input>，我怀疑是它导致不能正确解析，可是js代码我不知道哪里出了错误，调试并没有出现这个闭合，求教这到底怎么一回事啊？

Answer 1

我明白为什么不对了，createTextNode这个思路是对的，但是不能加在input标签里面
修改js如下：

ajax("/api/getlikes/", function (data) {
    var tmp = JSON.parse(data);
    for (var i = 0; i < tmp.length; i++){
        var li = document.createElement('li');
        var che = getCheckBox("userlikes");
        che.setAttribute("value", tmp[i]);
        var text = document.createTextNode(tmp[i]);
        li.appendChild(che);
        li.appendChild(text);
        ul.appendChild(li);
    }
})

Answer 2

che.innerHTML = tmp[i];这句，input元素没有innerHTML。