javascript - 复选框无法在html页面中显示

Question

我正在使用 dom 概念构建一个 html 页面，但该复选框未显示在 html 页面中。我的代码如下。

if (condition <= 0) {
 $doc = $(document.createElement("li")).attr({
     id: id,
     name: name,
     'class': 'liBullet'
 })
}

else {
 $doc = $(document.createElement("ul")).attr({
     id: id,
     name: name,
     'class': 'liBullet'
 })
}

$doc.append(
    $(document.createElement("input")).attr({
     id: id,
     type: "checkbox",
     name: name,
     'class': 'layerCheck'
    })

    .append(
        $(document.createElement("label")).attr({
          id: id,
          name: name
        })
    ).text(name)

    .append(
        $(document.createElement("div")).attr({
         id: id,
         'class': 'loadingLegend'
        })
    )).appendTo("#layer_list");
}

Answer 1

$(document.createElement("input")).attr({
                                     id: layer.id,
                                     type: "checkbox",
                                     name: layer.name, // <---- missing comma?
                                     'class': 'layerCheck'
                                 }); // <-- or missing semicolon?

另外，你不需要使用createElement，你可以这样做：

$("<input />").attr({
                       id: layer.id,
                     type: "checkbox",
                     name: layer.name,
                  'class': 'layerCheck'
              }).appendTo("body");

Answer 2

你也可以使用这个：

$("<input type='checkbox' id='id' name='name' value='val'/>").appendTo("body");

或者

$("body").append("<input type='checkbox' id='id' name='name' value='val'/>");

阅读关于append和appendTo