在JQuery Append方法中追加多个元素和使用类
在JQuery Append方法中追加多个元素和使用类
提问于 2019-05-27 00:24:01
我使用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';">×</span>New Message from Whatsapp!</div>");<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-05-27 00:54:07
您的代码有语法错误，因为在一个带引号的字符串中有各种引号。由于字符串同时包含单引号和双引号，因此不能只选择其中之一。因此，相反，选择其中一个来“逃脱”。例如，这里的字符串仍然用双引号括起来，然后在内部转义它的双引号字符：
$("#alerts").append("<div><span class=\"closebtn\" onclick=\"this.parentElement.style.display='none';\">×</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('×');
$('#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或引用问题或其他任何内容。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56315344
复制相关文章
相似问题