使用jquery在ul中添加li元素

add li element in ul using jquery

本文关键字：添加 li 元素 ul jquery 使用      更新时间：2023-09-26

我试着做一个简单的待办事项列表。这是我的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元素。但是当我尝试在铬我的新添加的元素显示我的半秒和删除。下面是我的js代码:

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

表单中的按钮有一个默认的submit类型，并且会提交表单，你需要阻止它或者在按钮上设置一个不同的类型:

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

试试这个

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;
 });
});
演示

您必须在函数末尾使用return false;:

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