Question

我想使用JavaScript制作一个li元素。我被告知这将有效，但事实并非如此。当我单击提交按钮时，我在文本字段中写的内容出现，然后很快消失。我该怎么办？

function addLi () {
    var x = document.createElement("LI");
    var t = document.createTextNode(document.getElementById('text').value);
    x.appendChild(t);
    document.getElementById("elements").appendChild(x);
}

    <header>
        <title>ToDoList</title>
        <script src="todolist.js"></script>
    <header>
    <body>
        <div>
            <form onSubmit="addLi();">
                <input type="text" value="Type here!" id="text">
                <input type="submit" value="Submit">
            </form>
            <ol id="elements">
            </ol>
        </div>
    </body>

Answer 1

@Felix说的是真的。您的submit按钮正在提交form，这会打开重新加载页面的请求。这是默认行为。您必须取消（又名阻止）此行为才能使您的功能正常运行：

您可以在return元素的onSubmit事件中添加form语句：
```
<form onSubmit="return addLi();">
```
然后在你的功能结束时return false;。

Fiddle
您可以将当前event传递给处理程序，并prevent将其按预期方式工作：
```
<form onSubmit="addLi(event);">
```
然后在功能结束时添加event.preventDefault();。

Fiddle
您还可以删除submit并使用button，默认情况下不会提交form：
```
<input type="button" value="Submit" onclick="addLi()" />
```
Fiddle

尝试使用JavaScript创建<li>元素，但它消失了

1 个答案: