点击按钮新增输入框功能实现求助（待办清单项目）

原代码存在的问题 #

1. 元素创建错误：document.createElement("input.value")是无效写法，创建输入框只需传入"input"作为参数
2. DOM挂载错误：原代码将新输入框追加到已有输入框内部，会导致DOM结构混乱，无法形成独立的待办项
3. 结构不统一：新增项没有和原有待办项（输入框+复选框）保持一致结构，破坏UI统一性

修正后的完整代码 #

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>To-Do</title>
</head>
<body>
    <h1 class="header">To-Do List</h1>
    <div class="container">
        <!-- 新增待办项列表容器，便于统一管理所有待办项 -->
        <div class="todo-list">
            <div class="form">
                <input class="field" type="text" placeholder="Input Text">
                <input class="check" type="checkbox">
            </div>
        </div>  
        <button class="createnew">Add New Field</button>
    </div>
    <script src="index.js"></script>
</body>
</html>

JavaScript

const button = document.querySelector('.createnew');
const todoList = document.querySelector('.todo-list');

function newField() {
    // 1. 创建和原有结构一致的待办项容器
    const formItem = document.createElement('div');
    formItem.classList.add('form');

    // 2. 创建输入框
    const inputElement = document.createElement('input');
    inputElement.setAttribute('type', 'text');
    inputElement.classList.add('field');
    inputElement.setAttribute('placeholder', 'Input Text');

    // 3. 创建复选框
    const checkElement = document.createElement('input');
    checkElement.setAttribute('type', 'checkbox');
    checkElement.classList.add('check');

    // 4. 组装待办项并添加到列表中
    formItem.appendChild(inputElement);
    formItem.appendChild(checkElement);
    todoList.appendChild(formItem);
}

button.addEventListener('click', newField);

关键修改说明 #

• 新增.todo-list容器，专门用于存放所有待办项，避免和按钮等其他元素混淆
• 每次点击按钮时，完整创建一个和原有待办项结构一致的.form容器，包含输入框和复选框
• 修正元素创建的错误写法，确保DOM元素能正确生成并挂载

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