javascript - 使用jquery在ul中添加li元素

Question

我尝试制作简单的待办事项列表。这是我的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 输入字段中读取并附加到现有的 ul 元素。但是当我在 chrome 中尝试它时，我新添加的元素会显示半秒并删除。这是我的js代码：

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

Answer 1

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

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

Answer 2

尝试这个

HTML

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

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

 </ul>
</form>

JS

$(document).ready(function() {
 $('button').click(function() {

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

演示

Answer 3

您必须return false;在函数结束时：

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