Javascript 显示flash消息时添加DOM膨胀

在我的Rails应用程序中，当用户保存时，它使用Ajax保存帖子，然后执行update.js.erb文件。在该文件中，我有一些jQuery：

$('body').append('<div class="message">Saved</div>');

$（'body'）。追加（'Saved'）；

---

因为我是这样做的，每次用户保存时，它都会在正文中添加更多的

Saved

。有什么方法可以阻止它吗？或者它无关紧要吗？

首先，除非保存发生了数千次，否则它可能无关紧要。请记住，图像非常大，因此网页中的几kb额外文本与一些图像相比显得苍白

其次，您有几个选项可以在DOM中仅使用其中一个：

将其显示给用户后，将其从DOM中删除（可能在计时器上）

只有一条消息，并在需要时显示/隐藏它（这可能是最简单的）

查看页面中是否已有一个，然后重新使用它

例如，要查找以前的消息对象（一开始是隐藏的）并在短时间内显示它，可以使用以下方法：

$(".message").html("Saved").show().delay(2000).fadeOut(1000);

如果您使用它，您只需将消息对象放在页面中一次就可以开始了，或者放在原始页面HTML中，或者只在页面启动代码中附加一次。然后，使用CSS将其默认为隐藏，以便仅在需要时显示

或者，如果您使用的是基于类名的CSS3转换，那么只需使用jQuery的

addClass（）

和

removeClass（）

一种惰性（但简单）方法就是在显示新消息之前清除其他消息：

$('.message').remove();
$('body').append('<div class="message">Saved</div>');

$（'.message'）.remove（）；
$（'body'）。追加（'Saved'）；

啊，你这个天才。我怎么没想到呢！：）非常感谢。我不会说这是懒惰！将您的.message div存储在一个容器中，然后在显示新的容器时清空此容器是值得的。我同意，我只想拥有“干净”的代码。我使用了上面的答案，即删除它，然后再次添加，类似于您的第一个选项。谢谢@user1919937-从技术上讲，重用单个消息对象比每次使用一个消息对象时都销毁和重新创建一个消息对象更好（一般要学习）。这就是我添加代码的目的。唯一的问题是我使用CSS来淡入淡出类，我不认为我可以在jQuery中重新创建它，可以吗？@user1919937-当然，你可以使用jQuery的

.addClass（）

和

.removeClass（）

来触发基于该类的CSS3转换。那么它会是

$（'.message'）.html吗(“已保存”）.addClass（'success'）.delay（2000）.removeClass（'success'）；

？