Question

我使用jquery方法append通过单击一个按钮在彼此之间创建新的div。

但是它只允许我追加一个div，因此在本示例中（带有关闭符号）看起来不希望通过单击隐藏div。这可能吗？

这意味着要附加另一个span标签：

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_alert

src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
 
 $(document).ready(function () {
      $("#btn1").click(function () {
        $("#alerts").append(" <div>New Message from Whatsapp!</div>");
      });
    });

  #alerts>div {
    padding: 1rem 2rem;
    font-weight: bold;
    color: white;
    background: #ECECEC;
    margin-bottom: 0.5rem;
    opacity: 0.7;
    border-radius: 15px;

  }

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

这是我尝试将span标签放入div时遇到的错误，这似乎是语法错误：

        $("#alerts").append(" <div> <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>New Message from Whatsapp!</div>");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

您的代码存在语法错误，因为在带引号的字符串中有各种引号。由于字符串包含单引号和双引号，因此您不能仅选择其中一个。因此，改为选择其中一个以“退出”。例如，这里的字符串仍然用双引号引起来，然后在内部转义其双引号字符：

$("#alerts").append("<div><span class=\"closebtn\" onclick=\"this.parentElement.style.display='none';\">&times;</span>New Message from Whatsapp!</div>");

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

作为替代方案，您可以使用更结构化的语法来使用jQuery构建元素。像这样：

let span = $('<span/>', { class: 'closebtn' }).html('&times;');
$('#alerts').append($('<div/>')
    .text('New Message from Whatsapp!')
    .prepend(span));
$(span).on('click', function () {
    this.parentElement.style.display='none';
});

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

它看起来更加冗长，因此我认为这是您使用哪种方法的个人喜好问题。但是，后一种方法的好处是，您可以将所有内容分解为单独的操作，每个操作都以一种简单且可支持的方式完成其一项操作，而无需在标记或引用问题中使用内嵌JavaScript。

追加多个元素并在JQuery追加方法中使用类

1 个答案: