js使用表单输入和按钮动态地将菜品添加到清单中

在JavaScript中，你可以通过操作DOM（文档对象模型）来创建动态表单，让用户输入菜品名称并点击按钮将其添加到列表。以下是简化的步骤：

1. 创建HTML结构：

<form id="recipeForm">
    <input type="text" id="ingredientsInput" placeholder="请输入菜品名...">
    <button type="button" onclick="addIngredient()">添加</button>
    <ul id="recipeList"></ul>
</form>

这里有一个文本输入框、一个添加按钮，以及一个空的无序列表用于显示菜品。

2. JavaScript函数`addIngredient()`处理事件：

function addIngredient() {
    // 获取用户输入的菜品名
    var ingredient = document.getElementById("ingredientsInput").value;

    // 如果有输入内容
    if (ingredient.trim()) {
        // 创建一个新的li元素
        var liElement = document.createElement("li");
        liElement.textContent = ingredient;

        // 将新元素添加到列表中
        document.getElementById("recipeList").appendChild(liElement);

        // 清空输入框
        document.getElementById("ingredientsInput").value = "";
    }
}

这个函数会在用户点击添加按钮时获取输入框的内容，如果非空，就创建一个新的列表项并添加到列表中，然后清空输入框。