如何使用insertBefore()在列表顶部添加元素并替换项目符号为复选框？

1. 用insertBefore()在列表顶部添加新元素 #

替换你原有的innerHTML +=逻辑，改成动态创建元素并插入到列表最前面：

const n = [];
const listUl = document.querySelector('#list ul'); // 提前获取ul元素，避免重复查询DOM

function changeText() {
  const inputText = document.getElementById('inputText').value;
  if (!inputText.trim()) return; // 过滤空输入
  
  n.push(inputText);
  
  // 创建新的li元素并嵌入复选框和任务文本
  const newLi = document.createElement('li');
  newLi.innerHTML = `<input type="checkbox"> ${inputText}`;
  
  // 插入到ul的最顶部
  listUl.insertBefore(newLi, listUl.firstChild);
  
  // 清空输入框
  document.getElementById('inputText').value = '';
}

2. 用复选框替代<ul>项目符号 #

在todoStyle.css中添加以下样式，去掉默认项目符号并优化布局：

#list ul {
  list-style: none; /* 移除默认项目符号 */
  padding-left: 0;
}

#list li {
  margin: 8px 0;
  padding-left: 8px;
}

修改后的完整HTML（修正了原代码的拼写错误） #

<html lang="en">
    <head>
        <title>To-Do list</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="todoStyle.css">
    </head>
    <body>
        <div id="form">
            <h1>New Task</h1>
            <div id="input">
                <input type="text" id="inputText" name="addNewList" placeholder="输入任务内容...">
            </div>
            <div id="button">
                <button onclick="changeText()">Add to list</button>
            </div>
        </div>
        <div class="list1" id="list">
            <h1>My to-do list</h1>
            <ul>
            </ul>
        </div>
        <script src="todo.js"></script>
    </body>
</html>

关键修改说明 #

• 提前缓存<ul>元素，减少重复DOM查询
• 新增空输入判断，避免添加无效任务
• 通过insertBefore(newLi, listUl.firstChild)确保新任务始终出现在列表顶部
• 修正了HTML中<mmeta>的拼写错误为<meta>
• 调整输入框和按钮顺序，更符合常规操作流程

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