使用 javascript 将用户添加到列表中答案

【问题标题】：Adding users to the list using javascript使用 javascript 将用户添加到列表中
【发布时间】：2014-05-14 17:16:19
【问题描述】：

我正在尝试使用 javascript 将用户添加到列表中，但我不知道为什么我的代码不起作用。

这是我的代码。

HMTL

<form id="myform">
    <h2>Add a User:</h2>
    <input id="username" type="text" name="username" placeholder="name">
    <input id="email" type="email" name="email" placeholder="email">
    <button onclick='addUser()' type="submit">add user</button>
</form>

<h2>UsersList:</h2>
<ul id="users"></ul>

JavaScript

<script>
    var list = document.getElementById('users');
    function addUser(){
        var username =document.getElementById('username').value;
        var email = document.getElementById('email').value;
        var entry = document.createElement('li');
        entry.appendChild(document.createTextNode(username + '' + email));
        list.appendChild(entry);
    }
</script>

【问题讨论】：

jQuery: how to add <li> in an existing <ul>? 的可能重复项
我正在尝试用纯js实现
请查看答案
@user3282116 那样的话，我会帮你去掉查询标签。
还有stackoverflow.com/questions/17773938/…

标签： javascript

【解决方案1】：

您需要正确处理表单提交。而不是按钮点击事件，你最好听onsubmit表单事件：

<form id="myform" onsubmit="return addUser()">

并且从函数中你需要返回false来阻止表单提交：

function addUser(){
    var username = document.getElementById('username').value;
    var email = document.getElementById('email').value;
    var entry = document.createElement('li');
    entry.appendChild(document.createTextNode(username + ' ' + email));
    list.appendChild(entry);

    return false;
}

演示：http://jsfiddle.net/8846u/

另请注意，制作按钮类型button 标记也可以，但最佳实践实际上是使用type="submit"。它提供的好处是您可以使用 Enter 键提交表单，这是一种很好且一致的表单行为。

【讨论】：

如何使用 ajax 验证电子邮件字段？
我建议将它作为一个单独的问题提出，它太宽泛，无法在 cmets 中回答。
这里是链接stackoverflow.com/questions/22828368/…

【解决方案2】：

试试这个

HTML

<form id="myform">
<h2>Add a User:</h2>
<input id="username" type="text" name="username" placeholder="name">
<input id="email" type="email" name="email" placeholder="email">
 <button onclick='return addUser();' type="submit">add user</button>
</form>


<h2>UsersList:</h2>
<ul id="users"></ul>

function addUser(){
    var list = document.getElementById('users');
var username =document.getElementById('username').value;
var email = document.getElementById('email').value;
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(username + ' ' + email));
list.appendChild(entry);
    return false;
}

DEMO HERE

【讨论】：

【解决方案3】：

该按钮将提交表单，将按钮类型更改为button 将修复它：

<button onclick='addUser()' type="button">add user</button>

【讨论】：