Question

我正在尝试向我的页面动态添加一个清单，看起来像这样，其中[]代表一个复选框

[ ] something
[ ] something
[ ] something

以下代码段显示了到目前为止的内容。如图所示，“内容”位于复选框下方，我希望它们位于同一行。

list = ["something1", "something2", "something3"];

document.addEventListener('DOMContentLoaded', function () {
    for (var i = 0; i < list.length; i++) {
        var container = document.getElementById("checklist");
        var li = document.createElement("li");
        var input = document.createElement("input");
        var text = document.createTextNode(list[i]);
        container.appendChild(li).appendChild(input)
        container.appendChild(text)
        input.type = "checkbox"
        li.style.listStyle = "none"
    }
})

#container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    top: 100px;
  }

#directions{
    color: green;
}

<body>
    <div id="container">
      <div id="directions">
        Check off list items!
      </div>
      <div id="checklist"></div>
    </div>
</body>

Answer 1

修复您的JavaScript：

//container.appendChild(text);
li.appendChild(text);

list = ["something1", "something2", "something3"];

document.addEventListener('DOMContentLoaded', function () {
    for (var i = 0; i < list.length; i++) {
        var container = document.getElementById("checklist");
        var li = document.createElement("li");
        var input = document.createElement("input");
        var text = document.createTextNode(list[i]);
        container.appendChild(li).appendChild(input);
        li.appendChild(text);
        input.type = "checkbox";
        li.style.listStyle = "none";
    }
})

#container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    top: 100px;
  }

#directions{
    color: green;
}

<body>
    <div id="container">
      <div id="directions">
        Check off list items!
      </div>
      <div id="checklist"></div>
    </div>
</body>

Answer 2

我建议您在此处使用div和label元素而不是li元素。

您还可以将list从字符串数组移动到对象数组，其中每个对象都有一个标识符和一个标签字符串。

如果您有任何疑问，请告诉我。

list = ["something1", "something2", "something3"];

document.addEventListener('DOMContentLoaded', function () {
    for (var i = 0; i < list.length; i++) {
        var container = document.getElementById("checklist");
        var formGroup = document.createElement("div");
        var input = document.createElement("input");
        var label = document.createElement("label");
        
        formGroup.appendChild(input);
        formGroup.appendChild(label);
        container.appendChild(formGroup);

        input.type = "checkbox"
        input.id = list[i];
        label.setAttribute("for", list[i]);
        label.innerText = list[i];
    }
})

#container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    top: 100px;
  }

#directions{
    color: green;
}

<body>
    <div id="container">
      <div id="directions">
        Check off list items!
      </div>
      <div id="checklist"></div>
    </div>
</body>

Answer 3

如果问题仅在于如何在同一行上获得复选框和文本，请将li设置为display: inline或display: inline-block。就是说，您可能不应该一开始就使用列表项，尤其是在父级不是列表时。

使用javascript创建带有输入复选框列表元素的内联文本元素

3 个答案: