使用jQuery添加列表项问题：添加后列表项突然消失求排查

错误点说明： #

• 表单提交触发页面刷新：你的按钮类型是submit，点击后会触发表单默认提交行为，页面刷新后动态添加的元素会被重置，所以刚添加的列表项会消失。
• jQuery选择器错误：代码里的$("need")无法选中目标元素，要选中class为need的<ul>，必须使用类选择器语法$(".need")（类选择器前需加.）。
• HTML标签闭合错误：添加列表项时写的"<li>" + needed + "<li>"存在语法错误，第二个<li>应该是闭合标签</li>，否则会破坏HTML结构。

修复后的代码 #

HTML（修改按钮类型）

<button type="button" class="btn btn-primary" id="needButton">Need</button>
<button type="button" class="btn btn-primary btn-success" id="haveButton">Have</button>
</form>
<div class="myNeed">
  <ul class="need">
    <li>The needed items are</li>
  </ul>
</div>

JavaScript（修正选择器和标签闭合）

$(document).ready(function() {
  $("#needButton").click(function () {
    var needed = $("#bill").val();
    $(".need").append("<li>" + needed + "</li>");
  });
});

内容的提问来源于stack exchange，提问作者Garry