如何在列表复选框旁添加输入文本值，并为输入元素添加onclick属性？

你的代码存在两个核心问题，直接导致无法正确显示输入文本和绑定点击事件：

1. 复选框无法容纳文本内容：<input type="checkbox">是HTML空元素，不能通过appendChild添加文本。文本需要放在复选框的同级位置（比如容器内的独立文本节点或span元素）。
2. 未给新复选框绑定点击事件：新创建的checkbox元素没有设置onclick属性，无法触发Check_item()函数。

修改后的JavaScript代码 #

function Add_item() {
  var listItem = document.createElement("li");
  var container = document.createElement("div");
  var checkbox = document.createElement("input");
  var itemName = document.getElementById("list-item-input");
  
  // 先获取输入值再清空输入框，避免拿到空字符串
  var itemText = itemName.value.trim();
  if (!itemText) return; // 空输入不添加项
  itemName.value = "";

  checkbox.type = "checkbox";
  checkbox.className = "list-item-checkbox";
  // 绑定onclick事件
  checkbox.onclick = Check_item;
  // 也可以用属性赋值方式：checkbox.setAttribute("onclick", "Check_item()");

  // 创建文本节点存放输入的内容，添加到容器中（和复选框同级）
  var textNode = document.createTextNode(itemText);

  // 按顺序组装DOM结构
  document.getElementById("list-items").appendChild(listItem);
  listItem.appendChild(container);
  container.appendChild(checkbox);
  container.appendChild(textNode);
};

额外说明 #

• 原HTML中的<input>标签写法不规范：<input>是自闭合标签，不需要</input>，正确写法应为<input type="checkbox" class="list-item-checkbox" onclick="Check_item()">Item 1（直接在标签后写文本即可）。
• 新增了空输入判断，避免添加空白的待办项，提升用户体验。

内容的提问来源于stack exchange，提问作者user21427607