javascript - 单击添加按钮绝对没有任何作用，我不知道为什么

Question

有人知道为什么按钮在单击时不会对输入使用react吗？我希望单击以显示提示，然后使用提示中的文本并将其作为与其他列表项具有相同 css 的列表项追加到 hmtl 中。

$(".btn").click(function() {
  var text = prompt('What do you need to do?')
  var txt1 = $("<li id="
    listItem "><p></p></li>").text(text);
  $("#itemList").append(txt1);
});

body {
  background: #bff0ff;
}

li {
  display: inline-block;
  float: left;
  padding: 5px;
}

#list {
  list-style-type: none;
}

#itemList {
  list-style-type: none;
}

#listItem {
  width: 250px;
  height: 75px;
  border-radius: 5px;
  background: #5ABCB9;
}

#listItem p {
  font-family: curive, sans-serif;
  text-align: center;
  font-size: 20px;
  color: #
}

.btn {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: 1px;
  font-size: 40px;
  background: #63E2C6;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<input type="button" class="btn" value="+" />
<ul id="itemList">
  <li id="listItem">
    <p>
      Study for exams.
    </p>
  </li>
</ul>

Answer 1

如果您尝试向现有的 ul 添加更多 li 元素，请尝试以下操作(因为在您当前的实现中 p 元素会渲染时被忽略):

$(".btn").click(function() {
  var text = prompt('What do you need to do?')
  var $li = $('<li/>',{ 'class' : 'listItem' })
  var $p = $('<p/>', { 'text' : text })
  $($li).append($p);
  $("#itemList").append($li);
});

示例:https://jsfiddle.net/9av0c8z3/