创建复选框并将其附加到列表

在 JavaScript 中，我们可以动态地创建复选框并将其添加到列表中。在本篇文章中，我们将演示如何使用 JavaScript 来完成此任务。

步骤 1：创建列表

首先，我们需要创建一个空列表，在 HTML 中，我们可以使用 <ul> 元素来创建一个无序列表。以下是示例代码：

<ul id="todoList"></ul>

步骤 2：创建复选框

接下来，我们创建一个复选框元素。使用 JavaScript 可以动态创建此元素，以下是代码：

var checkbox = document.createElement('input');
checkbox.type = "checkbox";

这段代码通过 document.createElement('input') 方法创建了一个 <input> 元素，然后通过 checkbox.type 属性设置元素类型为 "checkbox"。

步骤 3：创造标签

接着，我们创建一个 <label> 元素，将复选框添加到标签内。我们可以使用 textContent 属性来设置标签文本，如下所示：

var label = document.createElement('label');
label.textContent = "Do something";
label.prepend(checkbox);

这段代码通过 document.createElement('label') 方法创建了一个 <label> 元素，并使用 textContent 属性设置标签文本为“Do something”。然后，通过使用 prepend() 方法，将复选框元素添加到标签内。

步骤 4：将复选框附加到列表

最后，我们必须将 <label> 元素添加到列表中。我们可以使用 appendChild() 方法将其添加到列表中。

document.getElementById("todoList").appendChild(label);

这段代码使用 document.getElementById() 方法获取列表元素，然后使用 appendChild() 方法将 <label> 元素添加到列表中。

完整代码

以下是将上述代码合并到一个函数中：

function addCheckbox() {
  var checkbox = document.createElement('input');
  checkbox.type = "checkbox";
  
  var label = document.createElement('label');
  label.textContent = "Do something";
  label.prepend(checkbox);

  document.getElementById("todoList").appendChild(label);
}

结论

以上就是使用 JavaScript 在列表中动态创建复选框的过程。我们使用了 DOM 方法 document.createElement()，appendChild() 和 <input> 元素的 type 属性，还用到了 textContent 和 prepend() 属性来设置标签文本和添加子元素。