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

时间:2019-05-26 16:24:01

标签: jquery html

我使用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>

1 个答案:

答案 0 :(得分:0)

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

$("#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。