Question

我想创建一个像这样的新通知：

https://www.w3schools.com/howto/howto_js_alert.asp

每次单击特定按钮并将其附加在其他通知下。因此，每次都创建一个新元素。

我首先用jquery尝试过，但这似乎不允许我这样的自定义元素，只有文本

$(document).ready(function(){
  $("#btn1").click(function(){
    $("h1").append(" <b>Appended text</b>.");
  });

<button id="btn1">Append text</button>

Answer 1

喜欢吗？

$(document).ready(function() {
  $("#btn1").click(function() {
    $("#alerts").append(" <div>Appended text</div>");
  });
});

body {
  font-family: sans-serif;
}

button#btn1 {
  background: #0095ff;
  color: white;
  font-weight: bold;
  display: inline-block;
  border: none;
  padding: 1rem 2rem;
  margin: 0 0 1rem;
  text-decoration: none;
  font-family: sans-serif;
  line-height: 1;
  cursor: pointer;
  text-align: center;
  -webkit-appearance: none;
  -moz-appearance: none;
}

#alerts>div {
  padding: 1rem 2rem;
  font-weight: bold;
  color: white;
  background: red;
  margin-bottom: 0.5rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="btn1">Go</button>
<div id="alerts"></div>

Answer 2

您好像没有正确初始化$(document).ready()函数

应该是

$(document).ready(function() {
  $("#btn1").click(function() {
    $("h1").append(" <b>Appended text</b>.");
  });
});

查看小提琴以获取有效的示例https://jsfiddle.net/saksham_malhotra/3kq7z5wb/

创建按钮，该按钮会在每次点击时附加html通知div

2 个答案: