Javascript 使用jquery在ul中添加li元素

我试着做一个简单的待办事项清单。这是我的html代码：

<form>
   Task: <input type="text" name="task" id="input">
   <button>Submit</button>
</form>

<br>

<h2>What you need to do</h2>
<ul id="list">

</ul>

任务：
提交


你需要做什么

然后，我尝试使用jquery从I输入字段和apppend读取现有ul元素。但当我在chrome中尝试时，我新添加的元素会在半秒钟内显示出来并删除。 以下是我的js代码：

  $(document).ready(function() {
    $('button').click(function() {
            var new_task = $('#input').val();
            $('#list').append('<li>'+new_task+'</li>');
    });
  });

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
var new_task=$（'#input'）.val（）；
$（“#列表”）。追加（“
”+新任务+”
）；
});
});

表单中的按钮具有默认的提交类型，并且将提交表单，您需要防止这种情况发生或在按钮上设置其他类型：

$(document).ready(function() {
    $('button').on('click', function(e) {
        e.preventDefault();
        var new_task = $('#input').val();
        $('#list').append('<li>'+new_task+'</li>');
    });
});

$（文档）.ready（函数（）{
$（'button'）。在（'click'）上，函数（e）{
e、 预防默认值（）；
var new_task=$（'#input'）.val（）；
$（“#列表”）。追加（“
”+新任务+”
）；
});
});

试试这个

HTML

任务：
提交


你需要做什么

JS

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
var new_task=$（'#input'）.val（）；
$（“#列表”）。追加（“
”+新任务+”
）；
返回false；
});
});

---

您必须

返回false在函数末尾：

$('button').click(function() {
  var new_task = $('#input').val();
  $('#list').append('<li>'+new_task+'</li>');
  return false;   // This is new line of code
});

$（“按钮”）。单击（函数（）{
var new_task=$（'#input'）.val（）；
$（“#列表”）。追加（“
”+新任务+”
）；
return false；//这是新的代码行
});
当您单击按钮时，表单将被提交，因此页面将重新加载。我还将添加一个
$（'#input'）.val（''）.append（）
以提高可用性之后，@adeneo为什么每个人都坚持使用preventDefault（）而不是返回false？返回false还有另外一个好处，即在jQuery@Precastic-这是因为我们中的一些人认为返回false是对返回运算符的滥用，而我们真正要做的就是阻止默认操作，而preventDefault将是正确的工具。作为旁注，这也是为什么您几乎总是在jQuery的文档中找到preventDefault，而不返回false，例如@adeneo OK。谢谢请注意，jQuery仅在文档中描述了这两个函数之间的差异；）
$(document).ready(function() {
 $('button').click(function() {

  var new_task = $('#input').val();
  $('#list').append('<li>'+new_task+'</li>');
  return false;
 });
});

$('button').click(function() {
  var new_task = $('#input').val();
  $('#list').append('<li>'+new_task+'</li>');
  return false;   // This is new line of code
});